React Styled Components и CSS-in-JS в одном видео

You don’t need more configuration just installing it will make it work on any React project.

Your First Styled Component

Create a button/ folder under components/ and put index.jsx as the entry point of the component.

import React from "react";
import styled from "styled-components";

//styled will return a React Component with applied style 
const ButtonWrapper = styled.button`
  border: 0;
  background-color: #fff;
  color: #000;
  font-size: 18px;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 2px rgba(15, 15, 15, 0.2);

  &:hover {
    color: rgba(50, 25, 150);
  }
`;

export default function Button(props) {
  return <ButtonWrapper {...props}>{props.children}</ButtonWrapper>;
}

Мы импортируем styled из styled-components, который экспортирует все стандартные элементы HTML, которые вы можете использовать в качестве базового компонента, а затем добавляете к нему свой собственный стиль CSS.

все — это функция, которая принимает помеченный строковый литерал и анализирует для применения CSS, вам не нужно ставить фигурные скобки, поскольку ES6 и более поздние версии распознают строковые литералы, которые идут после имени функции и должны быть внутри (обратная галочка ``) вместо обычных одинарных или двойных кавычек.

Вы можете поместить обычный CSS между стартовой и закрытой обратной галочкой, а также styled-components использует Stylus CSS Pre-Processor, который знаком с SASS или LESS, который может легко позволить вам использовать предопределенные функции, миксины или иметь вложенные дочерние элементы с другими многими разные вещи, которые вы обычно делаете в обычных файлах стилей.

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

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

Если вы хотите получить CSS Intellisense и цвета кода для ваших стилизованных компонентов, обязательно установите VSCode Style-Components.

Стилизованные компоненты с реквизитами

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

С помощью styled-components вы можете передавать реквизиты, как и любой другой компонент React, где вы можете переключаться между стилями или использовать пользовательские значения реквизита для установки стиля. Таким образом, ваши компоненты становятся более читабельными и с ними проще работать в проекте.

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

//We can easily use expressions inside tagged string literals
const ButtonWrapper = styled.button`
  border: 0;
  background-color: #fff;
  color: ${props => (props.clicked ? "blue" : "#000")};
  font-size: ${props => (props.fontSize ? props.fontSize : "18px")};
  border-radius: 4px;
  box-shadow: 0px 0px 8px 2px rgba(15, 15, 15, 0.2);

  &:hover {
    color: rgba(50, 25, 150);
  }
`;

Если clicked будет true, что означает, что пользователь уже нажал кнопку, тогда мы можем изменить цвет на синий, в противном случае мы ставим черный цвет текста по умолчанию.

Тегированные строковые литералы позволяют вам поместить выражение внутри строки, которое оценивает код javascript, в этом случае styled-components позволяет нам передать обратный вызов (функцию), которая принимает переданные реквизиты в качестве аргумента и возвращает строку с примененным значением стиля, это Таким образом, вы можете манипулировать стилями так, как хотите, вы даже можете выполнить некоторые предварительные расчеты для позиции.

Кроме того, вы использовали селектор & для ссылки на текущий элемент и указания стиля наведения, поскольку styled-components использует препроцессор CSS Stylus.

Стилизация существующих компонентов

В некоторых случаях вам нужно применить свои собственные стили к стороннему компоненту или уже существующему вашему компоненту.

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

Одна вещь, которую вам нужно сделать, это передать свойство имени класса существующему элементу в основном контейнере (Wrapper), поскольку движок styled-components использует поколения имен классов для применения стилей CSS.

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

import React from "react";

export default function Link(props) {
  return (
    <a className={props.className} href={props.to}>
      {props.children}
    </a>
  );
}

Обязательно передайте props.classname в props имени класса элемента, иначе Styled не сможет применить ваши пользовательские стили.

Теперь давайте импортируем этот компонент в App.jsx и применим к нему собственный стиль.

import Link from "./components/link";
import styled from "styled-components";
//Pass component reference to styled function 
const CustomLink = styled(Link)`
  transition: color 250ms ease-in-out;
  &:hover {
    color: rgba(50, 25, 150);
  }
  cursor: pointer;
`;

Затем вы просто можете использовать CustomLink для рендеринга Link с вашими пользовательскими стилями.

Глобальные стили CSS

Иногда вам нужно применить глобальные стили ко всем компонентам и просто применить обычные стили CSS к DOM.

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

Создайте файл global-styles.jsx в папке src/, чтобы он содержал ваши глобальные стили приложения.

/* global-styles.jsx */
import { createGlobalStyle } from "styled-components";

//Make sure to export the returned component from createGlobalStyle function 
export default createGlobalStyle`

  html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: magenta;
  }
`;

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

/* App.js */
function App() {
  return (
    <div className="App">
      <h3>Hello World</h3>
      <Button clicked={true} fontSize={13}>
        Press Me!
      </Button>
      <Link>Normal Link</Link>
      <CustomLink>Link</CustomLink>
      <GlobalStyles />
    </div>
  );
}