В моем предыдущем посте Style React component with styled-components: Part-1 я написал, как мы можем начать использовать styled-components, и мы создали с ним один компонент Spinner.
Теперь мы можем видеть, как мы можем передать реквизиты стилизованному компоненту с именем StyledSpinner и изменить его цвет/поведение.
В этом примере я изменю цвет границы, передав prop. Итак, стилизованный компонент будет показывать цвет, который мы ему передаем.
Давайте используем реквизит для цвета границы.
border: 16px solid ${props => props.color || "red"};Здесь, как мы видим, я изменил цвет границы с #f3f3f3; на ${props => props.color || "red"}, что означает, что если передано какое-либо свойство, оно будет использовать его, в противном случае по умолчанию будет использоваться красный цвет.
Круто!
Реализация этого стилизованного компонента будет такой:
Теперь мы можем использовать этот StyledSpinner в нашем компоненте React и передать свойство с именем color.
<StyledSpinner color="#f3f3f3" />
Теперь я хочу добавить еще один StyledSpinner без передачи каких-либо реквизитов color, и он должен использовать красный цвет по умолчанию.
Посмотрим, как они выглядят.
Круто, как мы и ожидали!
Надеюсь, кто-то найдет это полезным.
Ура!
👋
Поскольку я пытаюсь размещать контент в Интернете, вы можете купить мне кофе за часы, потраченные на все это ❤️😊🌸
Мой блог: https://shahjada.me
