как применить несколько стилей свойств зависит от условия styled-компоненты

Question

Можно ли применить несколько стилей свойств одновременно?

const Button = styled.div`
  color: blue;
  opacity: 0.6;
  background-color: #ccc;
`

Мне нужно передать активное свойство, которое будет влиять на цвет, непрозрачность, цвет фона. Как я могу применить стили для активной кнопки сразу вместо объявления условий для каждого свойства?

const Button = styled.div`
  color: ${props.active ? 'green' : 'blue'};
  opacity: ${props.active ? 1 : 0.6};
  background-color: : ${props.active ? 'white' : '#ccc'};

Answer 1

Обычный подход - это условное отображение блоков CSS с css API:

const first = css`
  color: green;
  opacity: 1;
  background-color: white;
`;

const second = css`
  color: blue;
  opacity: 0.6;
  background-color: #ccc;
`;

const Button = styled.div`
  ${({ active }) => (active ? first : second)}
`;

const App = () => {
  const [active, trigger] = useReducer(p => !p, false);
  return (
    <Button active={active} onClick={() => trigger()}>
      Press Me
    </Button>
  );
};

Или с использованием таких общих утилит, как swithProp из styled-tools:

import styled, { css } from "styled-components";
import { switchProp, prop } from "styled-tools";

const Button = styled.button`
  font-size: ${switchProp(prop("size", "medium"), {
    small: prop("theme.sizes.sm", "12px"),
    medium: prop("theme.sizes.md", "16px"),
    large: prop("theme.sizes.lg", "20px")
  }, prop("theme.sizes.md", "16px"))};
  ${switchProp("theme.kind", {
    light: css`
      color: LightBlue;
    `,
    dark: css`
      color: DarkBlue;
    `
  }, css`color: black;`)}
`;

<Button size="large" theme={{ kind: "light" }} />

Answer 2

Создайте два класса и переключите эти классы в соответствии со свойством active

Например -

CSS

.activeClass{
  color:  green;
  opacity:  1 ;
  background-color:white;
}

.inactiveClass{
  color: blue;
  opacity:  0.6;
  background-color: #ccc;
 }

в Render

<button id="mybtn"  className={this.props.active ? 'activeClass' : 'inactiveClass'} >mybutton</button>

См. Рабочий пример здесь