Question

我有一个Component，我想重写它的样式。我已经使用样式化组件来构建它们。

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

我想知道更好的方法。

示例

 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

我建议使用classNames覆盖行为。您只需要更强的规则即可。 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规则。这是覆盖样式的最佳方法。

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

2 个答案: