我有一个组件,我想覆盖它的样式。我已经使用样式化组件来构建它们。

我的疑问是,如何覆盖子组件的样式。

我想知道更好的方法。



 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
}

10-06 04:27
查看更多