Могу ли я передать className в качестве опоры в StyledComponent в ReactJS?

Question

У меня есть простой компонент кнопки с действиями, переданными как свойства. Я решил стилизовать его, используя Styled-Components .

В моем приложении React у меня есть три кнопки с разными действиями, и я бы хотел, чтобы они имели другой цвет.

Могу ли я написать несколько CSS классов внутри StyledComponent и передать как опору и 'индикатор', какой класс должен быть стилизован для моего компонента?

Answer 1

Конечно, это одна из самых c основных функций стилизованных компонентов.

Один из способов - создавать разные компоненты:

const MyButton = styled.button`
  font-size: 12px;
  border: 1px solid red;
`;

const FooButton = styled(MyButton)`
  color: red;
`;

const BooButton = styled(MyButton)`
  color: blue;
`;

Другой способ - использовать props:

const MyButton = styled.button`
  font-size: 12px;
  border: 1px solid red;
  color: ${({type}) => type === 'foo' ? 'red' : 'blue'};
`;
...
... 
<MyButton type={'foo'} />

И что касается вашего исходного вопроса, вы можете это сделать. Но в большинстве случаев менее "стилизованные компоненты" i sh использовать таким образом имена классов.

Answer 2

Вы можете стилизовать классы внутри стилизованных компонентов следующим образом:

const Button = styled.button`
  &.className {
    // some styles
  }