Что такое стилизованные компоненты и почему мы хотим их использовать?

Вы знаете стилизованные компоненты? Если нет, то вот краткое введение: styled-components - это библиотека NPM, которая позволяет вам решать стилизацию вашего приложения React.js с помощью CSS-in-JS. Одна из причин, по которой это может быть так удобно, заключается в том, что он также позволяет использовать реквизиты React.js, которые мы можем передавать компонентам в styled-components для создания динамического стиля для нашего приложения. Например, если вы хотите динамически изменять внешний вид компонентов без необходимости писать исходный код CSS или использовать встроенные стили.

Давайте начнем.

Сначала мы создаем новое приложение React.js

создать-реагировать-приложение мое-реагировать-приложение

Затем мы установили стилизованные компоненты с помощью Yarn или NPM.

пряжа добавить стилизованные компоненты

Затем мы импортируем React и styled-components как обычно.

import React from “react”
import styled from “styled-components”

Теперь мы начнем с самого интересного. Мы собираемся создать стилизованный компонент, то есть базовую HTML-кнопку, как определено «кнопкой», которую мы можем улучшить внутри обратных кавычек с помощью какого-либо CSS. Типичный синтаксис CSS заметен, но теперь в качестве значения цвета фона мы можем передать опору.

const Button = styled.button`
   background-color: ${props => props.color};
`

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

function App() {
  return (
    <div className=”App”>
      <Button color=”green”>This is a green button</Button>
      <Button color=”blue”>This is a blue button</Button>
    </div>
  )
}

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

Пока довольно круто, да? Но мы можем работать даже с логическими значениями!

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

Чтобы использовать это, мы создаем новый компонент. Код JS в нем является сокращенным синтаксисом для if-else, который мы хотим использовать, чтобы сделать компонент видимым или нет, в зависимости от переданного свойства.
Наш синтаксис означает, что если свойство «visible ”имеет значение true, мы хотим установить значение CSS, видимое для свойства видимости, а если оно равно false, мы хотим установить значение CSS как скрытое. Итак, истинное означает видимое, ложное - невидимое.

const ToggleButton = styled.button`
  /* if true, button will be visible */
  visibility: ${props => (props.visible ? “visible” : “hidden”)};'
`

Теперь есть два способа управлять свойством видимости через компонент.
Если мы вообще не передаем свойство, React.js по умолчанию установит для него значение false. Если мы передадим его, даже без стоящего за ним значения, поскольку он нам не нужен для логических значений, React.js передаст true. Пример, как всегда, ниже.

<ToggleButton visible>This button is visible</ToggleButton> <ToggleButton>This button is not visible</ToggleButton>

Но если мы хотим связать все это, например, с наше состояние, мы также можем использовать синтаксис JavaScript. Результат тот же, но вы можете использовать переменную для true и false, что является одним из обоих.

<ToggleButton visible={true}>This button is visible</ToggleButton> 
<ToggleButton visible={false}>
  This button is not visible
</ToggleButton>

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

Ниже вы по-прежнему найдете весь исходный код, спасибо за чтение, обязательно поделитесь этой статьей со своими друзьями.

С уважением и получайте удовольствие от этой техники
Луи

Обо мне, автор :)

Привет! Еще раз большое спасибо за чтение, меня зовут Луи, я 18-летний студент из Германии. Я влюблен в веб-разработку, как в бэкэнд, так и во фронтенд. Мои любимые технологии - React, Vue, React Native и Node.js.
Обязательно подпишитесь на меня, чтобы узнать больше о них, и не стесняйтесь заглядывать на мой IG @ louis.jsx
Есть хороший день!