Как мы добавим свойство css к классу в стилизованном компоненте? - PullRequest
Новая
       11

Как мы добавим свойство css к классу в стилизованном компоненте?

1 голос
/ 27 сентября 2019

У меня есть сомнения в стилизации реактивных компонентов с использованием styled-компонентов.Очень просто добавить свойство css с помощью styled-component к кнопке, как показано ниже 

const Button = styled.button`
      background: black;
      color: white;
      border-radius: 7px;
      padding: 20px;
      margin: 10px;
      font-size: 16px;
      :disabled {
        opacity: 0.4;
      }
      :hover {
        box-shadow: 0 0 10px yellow;
      }
    `;

, но когда мы взглянем на традиционный способ стилизации элементов, я застрял в нем.Предположим, у нас есть кнопка, и я добавил к ней активный класс и свойство css, как показано ниже 

<button class='active'> click me</button>
.active{
   background: red;
   color: black;
}

Как мы добьемся описанного выше способа стилизации элемента в стилизованном компоненте.Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что я динамически добавляю имя класса к кнопке при ее нажатии, мне нужно выделить активную кнопку, используя «активное» имя класса по стилизованному компоненту.

1 Ответ

0 голосов
/ 27 сентября 2019

Вы можете использовать props в стилизованных компонентах для настройки стиля. 

import { Button } from 'styled-components/native';

const MyButton = styled.Button`
  background: ${props => props.active ? 'red' : 'black'};
  color: ${props => props.active ? 'black', 'white'};
`;

<MyButton active={true} title="Click me" />
...