Question

我在React应用程序中使用样式组件库，例如，我有以下代码块：

如果道具具有设定值，我需要添加其他样式，例如：

const Wrapper = styled.div`
  background: red;
`;

执行此操作的最佳方法是什么？

Answer 1

对于一种样式：

const Wrapper = styled.div`
    background: red;
    color: ${props => props.myProps === 'ok' && 'white'};
`;

对于多种样式：

const Wrapper = styled.div`
    background: red;
    ${props => {
        if (props.myProps === 'ok') return `
            background-color: black;
            color: white;
        `
    }}
`;

另一种选择是使用styled.css：

// Define a pure group of css properties
const okStyle = styled.css`
    background-color: black;
    color: white;
`;

// Reuse okStyle inside a styled component
const Wrapper = styled.div`
    background: red;
    ${props => props.myProps === 'ok' && okStyle}
`;

Answer 2

另一个语法选项。
_{这实际上就是我现在编写所有样式化组件的方式。它使事情更易于迭代/更新。}

const Wrapper = styled.div(
  (props) => css`
    background: red;

    ${props.isOK &&
    css`
      background-color: black;
      color: white;
    `}
  `
);

Answer 3

您应该添加

const Wrapper = styled.div`
  background: red;
  color: ${p => p.isOk ? 'white' : 'green'}; // color will be added only if this.props.myProps == 'ok', else color will be green
`;

要发送此道具，您应该使用

这样的语法

return (
  <Wrapper isOk={true}>Some text</Wrapper>
)

使用样式化组件来支持条件渲染

3 个答案: