Краткое введение в Styled-компоненты

В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту библиотеку.

С помощью этой библиотеки вы увидите магию смешения CSS-кода с Javascript прямо внутри компонента React.

Сначала мы разберем основы с помощью нескольких примеров. Как только вы начнете использовать стилизованные компоненты, это будет казаться естественным, как работа с ванильным CSS, Sass или PostCSS.

Предварительные условия:

Основы react.

Что и почему Styled-components?

Styled-компоненты - это решение для стилизации CSS-в-JS для React и React Native.

Он использует тегированные литералы шаблонов, что позволяет писать простые CSS, привязанные к одному компоненту, внутри JS-кода.

Он устраняет отображение между компонентами и стилями. Это означает, что когда вы определяете стили, вы фактически создаете обычный компонент React, к которому привязаны ваши стили.

Особенности / преимущества:

1. Отсутствие ошибок в именах классов - Библиотека генерирует уникальные имена классов для каждого стиля, поэтому вам никогда не придется беспокоиться о дублировании или неправильном написании.

2. Автоматический критический CSS - библиотека автоматически отслеживает, какие компоненты отображаются на экране, и внедряет только их стили.

3. Более простое удаление CSS - если вы работали над большой базой кода, использующей обычные CSS файлы, становится очень сложно отслеживать неиспользуемые классы, в случае со стилизованными компонентами каждый стиль привязан к определенному компоненту (как вы знаете, неиспользуемые компоненты могут быть легко указаны в коде vs) удаление компонента приведет к удалению его стилей.

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

5. Безболезненное обслуживание - Очень легко организовать стили с помощью библиотеки, и вам не придется перемещаться по разным файлам, чтобы найти стиль, влияющий на ваш компонент.

6. Автоматический префикс поставщика - Для некоторых новых функций CSS вам, возможно, придется явно прописывать свойства CSS для каждого браузера, но с помощью styled-component вы можете написать свой CSS в соответствии с текущим стандартом и позволить styled-components сделать все остальное.

Установка
Для загрузки styled-components выполните:

npm install - save styled-components

Содержание:

• Основы
• Адаптация на основе реквизитов
• Расширение стилей
• Стилизация любого компонента
• Передаваемые реквизиты
• Присоединение дополнительных реквизитов
• Теминг

Основы

Этот пример создает два простых компонента, обертку и заголовок, с некоторыми стилями, прикрепленными к ним:

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

import styled from "styled-components";

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5rem;
  text-align: center;
  color: red;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 2em;
  background: papayawhip;
`;
// Use Title and Wrapper like any other React component – except they're styled!
function App() {
  return (
    <Wrapper>
      <Title>Welcome to Styled-Components</Title>
    </Wrapper>
  );
}

export default App;

Вывод:

В качестве параметров в обратных ссылках мы передаем отдельные стили, как мы знаем их из CSS.

Вот так просто было создать компонент - и сохранить его в переменной Title.

styled.h1 указывает на то, что мы хотим использовать тег H1 в качестве элемента HTML. Таким образом, наш компонент title теперь является H1 со свойствами CSS, которые мы передали в обратных знаках.

Внутри обратных знаков мы пишем CSS-код точно так же, как мы бы написали его в CSS-файле или стилевом теге - с учетом переносов строк и точек с запятой.

Адаптация на основе реквизитов

Теперь давайте рассмотрим пример, когда мы хотим сделать две кнопки, для которых нужно иметь разный фон и цвет текста, а остальные свойства CSS - размер шрифта, margin, padding, border и border-radius.

Этого можно достичь, передавая интерполяции в литерал шаблона стилизованного компонента, чтобы адаптировать его на основе его реквизитов.

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "green" : "white"};
  color: ${props => props.primary ? "white" : "green"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid green;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

Вывод:

Расширение стилей

Теперь иногда вы хотите использовать компонент и хотите сделать некоторые небольшие изменения, чтобы использовать его по-другому.

Взяв вышеприведенный пример, мы создадим компонент, который наследует стилистику другого компонента, просто обернув ее в конструктор styled(). Ниже я использовал приведенный выше пример кнопки и создал новый компонент с небольшими изменениями.

// The Button from the last section without the interpolations
const Button = styled.button`
  color: green;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid green;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

Вывод: Мы видим, что новый TomatoButton по-прежнему похож на Button, а мы добавили только два новых правила.

Стилизация любого компонента

Теперь с помощью метода styled мы можем стилизовать любой свой или любой сторонний компонент, если только мы присоединим переданное свойство className к элементу DOM.

Возьмем компонент стороннего производителя (ссылка из react-DOM)

в приведенном ниже примере:

// This could be react-router-dom's Link for example
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

Вывод:

Переданный реквизит

Как мы все знаем, реквизиты - самая важная концепция в react, они делают наше приложение проще и динамичнее.

Мы также можем использовать их в стилизованных компонентах. Если это пользовательский React-компонент (например, styled(MyComponent)), то styled-компоненты передают все реквизиты.

Этот пример показывает, как все реквизиты компонента Input передаются смонтированному узлу DOM, как в случае с элементами React.

// Create an Input component that'll render an <input> tag with some styles
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.inputColor || "black"};
  background: lightgreen;
  border: none;
  border-radius: 3px;
`;

// Render a styled text input with the standard input color, and one with a custom input color
render(
  <div>
    <Input defaultValue="Enter name" type="text" />
    <Input defaultValue="Enter email" type="text" inputColor="red" />
  </div>
);

Вывод: Обратите внимание, что реквизит inputColor не передается в DOM, а type и defaultValue передаются. То есть styled-компоненты достаточно умны, чтобы автоматически фильтровать нестандартные атрибуты за вас.

И еще одно, мы также можем работать с условиями.

В приведенном ниже примере - если prop.show равен true, то в качестве CSS-значения используется visible, в противном случае JS-код возвращает hidden.

const Heading = styled.h2`
  visibility: ${props => (
 props.show ? "visible" : "hidden")
};
`

function App() {
return <Heading show={true}>Hello!</Heading>
}

Присоединение дополнительных реквизитов

Чтобы избежать ненужных оберток, которые просто передают некоторые реквизиты отображаемому компоненту или элементу, вы можете использовать конструктор .attrs. Он позволяет присоединить к компоненту дополнительные реквизиты (или "атрибуты").

.attrs

Это цепной метод, который присоединяет некоторые реквизиты к стилизованному компоненту. Первым и единственным аргументом является объект, который будет присоединен к остальным реквизитам компонента. Объект attrs принимает следующие значения:

Prop Value:

Они могут быть любого типа, кроме функций. Они останутся статичными и будут объединены в существующие реквизиты компонента.

Prop Factory:

Функция, которая получает реквизиты, передаваемые в компонент, и вычисляет значение, которое затем объединяется с существующими реквизитами компонента.

// import styled from 'styled-components'

const Input = styled.input.attrs(props => ({
  type: 'text',
  size: props.small ? 5 : undefined,
}))`
  border-radius: 3px;
  border: 1px solid palevioletred;
  display: block;
  margin: 0 0 1em;
  padding: ${props => props.padding};

  ::placeholder {
    color: palevioletred;
  }
`

render(
  <>
    <Input small placeholder="Small" />
    <Input placeholder="Normal" />
    <Input padding="2em" placeholder="Padded" />
  </>
)

Вывод:

Теминг

styled-components имеет полную поддержку тематизации, экспортируя компонент-обертку <ThemeProvider>. Этот компонент предоставляет тему всем компонентам React под собой через контекстный API.

Сначала импортируйте компонент ThemeProvider из компонентов стиля.

Что вы должны знать о ThemeProvider, так это то, что он предоставляет эту тему всем компонентам react под собой через контекстный API, поэтому все компоненты стиля будут иметь доступ к этой предоставленной теме, даже если они находятся на нескольких уровнях в глубину.

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

// We are passing a default theme for Buttons that arent wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}

// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <Button>Normal</Button>

    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);

Вывод:

Итак, это все с моей стороны. Я знаю, что это основа стилизованных компонентов и есть много других вещей, которые я не охватил, но не волнуйтесь, я буду продолжать обновлять этот блог и добавлять новые вещи. А пока, пожалуйста, оставляйте свои отзывы в комментариях, чтобы улучшить мои блоги. Спасибо. Счастливого кодинга! Выпьем за жизнь :)