React Inline樣式與客戶端CSS衝突

我們需要在客戶端頁面中加載我們的應用程序。我們正在使用React來構建它們。所以，我們通過將樣式定義爲Objects來使用React Inline Styles。但是我們遇到了一個問題。當客戶端使用標籤屬性指定任何css時。我們從來沒有以inline定義的屬性獲取客戶端css的標籤屬性中使用的屬性。React Inline樣式與客戶端CSS衝突

下面的代碼是我們用於導航欄的反應內聯樣式。

var style = { 
navigation: { 
    minWidth: '50px ', 
    position: 'relative ', 
    marginBottom: '20px ', 
    border: '1px solid transparent ' 
}, 
}; 
render function() { 
return(<nav style={style.navigation}> ...... </nav>); 
}

在客戶端，他使用樣式標籤屬性來定義導航欄。

nav{height:40px;}

在這種上述情況下，由客戶端定義的導航屬性也被添加到我們的內嵌樣式，並造成很大的麻煩。

建議一些更好的解決方案。在這種情況下使用Reset類是唯一的解決方案 ??

來源

2017-07-29 Subramanian K

它會佔用的CSS明顯。你可以做的是重寫它們或刪除那些不想要的風格 – Piyush

嘿piyush。謝謝回覆。但它來自客戶端的CSS頁面。所以重置是唯一的方法來做到這一點。？ –

不重置實際上只是重寫它們。這是你的方式，你也可以提供classNames以及不同的標籤 – Piyush

您需要重置組件中受客戶端CSS影響的任何CSS樣式。一種方法是使用CSS all property。

CSS所有速記屬性將除unicode-bidi和direction之外的所有屬性重置爲其初始值或繼承值。

此解決方案的問題是all在IE或Edge中不受支持。

var style = { 
    navigation: { 
    all: 'initial', 
    minWidth: '50px ', 
    position: 'relative ', 
    marginBottom: '20px ', 
    border: '1px solid transparent ' 
    }, 
}; 

render function() { 
    return(<nav style={style.navigation}> ...... </nav>); 
}

以下是這個動作的例子 - 利用CSS all: initial屬性，其他沒有示出同一<Nav />組分，一種。如前所述，這不適用於Internet Explorer或Edge。

class Nav extends React.Component { 
 
    render() { 
 
    var style = { 
 
     navigationWithAll: { 
 
     all: 'initial', 
 
     border: '1px solid red' 
 
     }, 
 
     navigation: { 
 
     minWidth: '50px ', 
 
     position: 'relative ', 
 
     marginBottom: '20px ', 
 
     border: '1px solid red' 
 
     } 
 
    }; 
 

 
    return (
 
     <div> 
 
     <nav style={style.navigation}>Navigation</nav> 
 
     <nav style={style.navigationWithAll}>Navigation</nav> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Nav />, 
 
    document.getElementById('app') 
 
);

nav { 
 
    height: 100px; 
 
    background-color: gray; 
 
    font-family: "Comic Sans MS"; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

如果需要支持IE或邊緣，這可能是這種情況，你將需要重置這些被繼承的特定CSS屬性。

styles = { 
    navigation: { 
    height: 'initial' 
    } 
}

，但一個更強大的解決方案，這將在所有客戶網站工作將導入CSS部件復位：這個就可以像下面這樣簡單的事情要做。

reset = { 
    margin: 'initial', 
    padding: 'initial', 
    height : 'auto', 
    height: 'initial', 
    width: 'auto', 
    // any other properties you want to reset, or a full list of CSS properties to reset to initial/auto 
    } 
}

然後導入該復位到組件樣式

import reset from 'reset' 

styles = { 
    navigation: { 
    ...reset, 
    border: 1px solid red, 
    // your custom styles 
    } 
}

來源

2017-07-29 09:33:20

感謝Brett爲您提供的幫助。將測試此解決方案。 –

React Inline樣式與客戶端CSS衝突

回答

相關問題