覆盖样式组件的儿童风格的最佳方法

Question

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

我的疑问是，一个人如何覆盖子部分的样式。

我想知道更好的方法。

示例

 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>
)

Answer 1

我建议使用类名称覆盖行为。您只需要更强大的规则即可。Tex：

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

Answer 2

CSS !important规则将覆盖具有更高优先级的标签。例如，如果将类应用于子元素，则使用以下代码background-color: green !important;将类别覆盖可能应用于子元素的其他background-color规则。这是覆盖样式的最佳方法。