5 основных навыков работы со стилизованными компонентами, которым я научился

Это моя памятка по использованию styled-components.

  1. Основной синтаксис

  2. Использовать реквизиты

  3. Использовать пользовательские компоненты

  4. Создание многократно используемых переменных

  5. Создавать повторно используемые фрагменты css

Основной синтаксис

    import styled from "styled-components"

    const StyleContainer = styled.cssSelector`
    // your styles
    `
Вход в полноэкранный режим Выход из полноэкранного режима

Это пример стилизации кнопки.

    const BaseButton = styled.button`
      padding: 10px;
      background-color: #333;
      color: white;
      border-radius: 20px;
      border: none;
      cursor: pointer;
    `;
Вход в полноэкранный режим Выход из полноэкранного режима

Использование реквизитов

Поскольку это JS, вы можете передавать реквизиты.

В данном примере мы используем эту возможность, чтобы использовать одни и те же стили, но менять цвет фона в зависимости от номера страницы.

    export const PageContainer = styled.div`
      min-height: 100vh;
      background-color: ${(props) => props.color};
      color: white;
      padding: 10px;
    `;
Вход в полноэкранный режим Выход из полноэкранного режима

Используйте этот компонент с цветовым реквизитом.

    import { PageContainer } from "./Page.style"

    const Page2 = () => {
      return (
        <PageContainer color="#5bb381">
          <h1>Page2</h1>
        </PageContainer>
      );
    };
    export default Page2;
Вход в полноэкранный режим Выход из полноэкранного режима

Использование пользовательских компонентов

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

Этот фрагмент кода использует Link из react-router-dom.

    const LogoContainer = styled(Link)`
      text-decoration: none;
      ${linkStyle}
    `;
Войти в полноэкранный режим Выход из полноэкранного режима

О проводном синтаксисе ${linkStyle} я расскажу позже.

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

    const BaseButton = styled.button`
      padding: 10px;
      background-color: #333;
      color: white;
      border-radius: 20px;
      border: none;
      cursor: pointer;
    `;

    const SecondaryButton = styled(BaseButton)`
      background-color: white;
      border: 1px #333 solid;
      color: #333;
    `;
Вход в полноэкранный режим Выход из полноэкранного режима

Создание многократно используемой переменной

Мы можем использовать JS-переменные как css-переменные. Основной синтаксис — создать JS-переменную и обернуть ее ${}, когда вы ее используете.

    const blue = "blue";
    const LinkContainer = styled(Link)`
      ${linkStyle}
      &:hover {
        color: ${blue};
      }
    `;
Вход в полноэкранный режим Выход из полноэкранного режима

Создание многократно используемых фрагментов css

Вы можете создавать css-фрагменты, аналогичные @maxin в scss.

    const black = "black";

    const linkStyle = css`
      color: ${black};
      cursor: pointer;
    `;

    const LogoContainer = styled(Link)`
      text-decoration: none;
      ${linkStyle}
    `;
Войти в полноэкранный режим Выход из полноэкранного режима

Весь код доступен здесь.

styled-components

Оригинальная статья находится здесь

Оцените статью
Procodings.ru
Добавить комментарий