如何防止外部CSS添加和覆蓋ReactJS組件樣式

我有一個自定義的ReactJS組件，我想以某種方式進行樣式設置，並將其作爲插件提供給許多不同的網站。但是，當網站使用全局樣式（Twitter引導程序或另一個CSS框架）時，它會添加並覆蓋我的組件的樣式。例如：如何防止外部CSS添加和覆蓋ReactJS組件樣式

global.css中：

label { 
     color: red; 
     font-weight: bold; 
    }

component.js：

class HelloMessage extends React.Component { 
    render() { 
     let style = { 
      color: "green" 
     }; 
    return (<label style={style}>Hello</label>); 
    } 
}

結果：

在上面，我沒有使用「字體 - 重量：粗體「在我的組件的風格，但結果我的組件正在使用它。

我希望能夠封裝我的自定義組件的樣式，使它們在所有網站中看起來相同。

來源

2016-05-24 Den

據我所知，如果你不希望你的元素繼承屬性，你將需要自己設置它們。例如，style = {color：「green」，fontWeight：「normal」} – Paran0a

如果使用css框架組件，將獲得該框架樣式。從您正在使用的框架中刪除這些組件樣式 –

@ Paran0a我無法預見哪些屬性將在global.css中，或者我不知道哪個css框架將在網站上。 – Den

在我看來，最好的方法是定義某種爲組件復位類的，把一組CSS的重設，你可以找到在那裏（如http://meyerweb.com/eric/tools/css/reset/）

在sass文件定義可以是這樣的：

.your-component-reset { 
    div, span, object, iframe { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-weight: normal; 
     font-size: 100%; 
     font: inherit; 
     vertical-align: baseline; 
    } 
    // add some more reset styles 
}

爲了避免寫了很多，當你不希望使用sass只使用通用選擇*：

.your-component-reset * { 
    margin: 0; 
    padding: 0; 
    font-weight: normal; 
    // other reset styles ... 
}

來源

2016-05-24 12:07:48

如何防止外部CSS添加和覆蓋ReactJS組件樣式

回答

相關問題