Поддерживает условный рендеринг с использованием стилизованных компонентов

Question

Я использую библиотеку компонентов стилей внутри приложения React, и у меня есть этот блок, например:

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

Мне нужно добавить какой-то другой стиль, если свойство имеет заданное значение, например:

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

Как лучше всего это сделать?

Answer 1

Другой вариант синтаксиса. _{Фактически, именно так я сейчас пишу все свои стилизованные компоненты. Это упрощает итерацию / обновление.}

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

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

Answer 2

Для одного стиля:

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