Question

export const RedHeader = styled.div`
  color: red;
  border: 1px solid blue;
  background-color: gray;
`;

function Header(className) {
    return (
        <RedHeader className={className}>
            this is styled component example
            <p>test</p>
        </RedHeader>
    )
}

export default Header;

我对文件进行了红色标注，但我不知道为什么我们要使用className作为道具，然后在className={className}中使用它？

Answer 1

使用样式化的组件时，不再需要使用className（在HTML中以class属性呈现）。在您的示例中，您将className传递给样式化的组件，但是样式化的组件没有以任何方式使用它。

如果您希望像在经典CSS中使用类名一样进行动态样式化，则可以将属性传递给样式化的组件。

取决于类名的样式示例：

 const RedHeader = styled.div`
  color: red;
  &.active {
    color: blue;
  }
 `

带有道具的例子：

 const RedHeader = styled.div`
  color: ${props => props.active ? 'blue' : 'red'}
 `

 function Header({ active }) {
    return (
        <RedHeader active={active}>
            example
        </RedHeader>
      )
  }

样式化组件ReactJs

1 个答案: