[英]How to prevent outside CSS from adding and overriding ReactJS component styles
我有一个自定义的ReactJS组件,我希望以某种方式设置样式,并作为插件提供给许多不同的网站。 但是当网站使用全局样式(Twitter引导程序或其他css框架)时,它会添加并覆盖我的组件的样式。 例如:
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>);
}
}
结果:
上面我没有在我的组件的样式中使用“font-weight:bold”,但结果我的组件正在使用它。
我希望能够以一种使所有网站看起来相同的方式封装我的自定义组件的样式 。
在我看来,最好的方法是为你的组件定义某种重置类,并放入一组你可以找到的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 ...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.