我有一个组件,我想覆盖它的样式。我已经使用样式化组件来构建它们。
我的疑问是,如何覆盖子组件的样式。
我想知道更好的方法。
例
const Child = styles.div'
font-size: '10px'
'
const Wrapper = styles.div'
color: red
'
const DummyComponent = () => (
<Wrapper>
<Child>Hello</Child>
</Wrapper>
)
我想更改孩子的填充或边距或其他任何属性。
有什么更好的方法。
使用内联样式或className。还是在样式组件中有更好的方法可以做到这一点。
使用内联样式
const DummyComponent = ({childStyles}) => (
<Wrapper>
<Child style={{...childStyles}}>Hello</Child>
</Wrapper>
)
使用className
const DummyComponent = ({childClass}) => (
<Wrapper>
<Child className={childClass}>Hello</Child>
</Wrapper>
)
最佳答案
我建议使用classNames覆盖行为。您只需要更严格的规则即可。特克斯:
const DummyComponent = ({childClass}) => (
<Wrapper className="div--wrapper">
<Child className="div--child">Hello</Child>
</Wrapper>
)
// css
.div--wrapper .div--child{
// override css go here
}