css - 覆盖样式组件中子样式的最佳方法

Question

我有一个组件，我想覆盖它的样式。我使用 styled-components 来构建它们。

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

我想知道更好的方法。

例子

 const Child = styles.div'
      font-size: '10px'
    '
    const Wrapper = styles.div'
      color: red
    '
const DummyComponent = () => (
  <Wrapper>
    <Child>Hello</Child>
  </Wrapper>
)

我想更改填充或边距或子项的任何其他属性。

什么是更好的方法。 使用内联样式或类名。或者在 styled-component 中是否有更好的方法来做到这一点。

使用内联样式

const DummyComponent = ({childStyles}) => (
  <Wrapper>
    <Child style={{...childStyles}}>Hello</Child>
  </Wrapper>
)

使用类名

const DummyComponent = ({childClass}) => (
   <Wrapper>
       <Child className={childClass}>Hello</Child>
    </Wrapper>
)

Answer 1

我建议使用类名来覆盖行为。你只需要你的规则更强大。文本:

const DummyComponent = ({childClass}) => (
   <Wrapper className="div--wrapper">
       <Child className="div--child">Hello</Child>
    </Wrapper>
)
// css
.div--wrapper .div--child{
  // override css go here
}