reactjs - 使用 styled-components 的 Prop 条件渲染

Question

我在 React 应用程序中使用 styled-components 库，例如我有这个 block :

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

如果 Prop 有设定值，我需要添加一些其他样式，例如:

const Wrapper = styled.div`
  background: red;
  color: white; // color should be added only if this.props.myProps == 'ok'
`;

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

Answer 1

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

import styled, { css } from "styled-components";

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

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