Введение в стилизованные компоненты

В этой статье мы сразу же перейдем к представлению концепций и подходов к использованию стилизованных компонентов в стилизации наших компонентов React.

Стилизованные компоненты следуют парадигме CSS-in-JS. Чтобы использовать стилизованные компоненты, во-первых, нам нужно установить и импортировать их в наш проект реагирования, поскольку он не поставляется с предварительно собранным реагированием.

Наше обычное реагирующее приложение выглядит так:

export default function Component() {
        return (
         <div>
            <p>Hello World </p>
         </div>
        )
     }

Теперь вместо того, чтобы стилизовать этот компонент React, засоряя повсюду classNames, мы могли бы использовать стилизованные компоненты для стилизации компонентов. Стилизованные компоненты гарантируют, что стили не перетекают из одного компонента в другой.
Чтобы начать использовать стилизованные компоненты, нам нужно сначала импортировать их в наш проект.

import styled from 'styled-components';

Чтобы стилизовать div в нашем компоненте выше, мы должны сделать следующее.

const DivWrapper = styled.div`
      width: 50%;
      border: 2px solid black;
    `;

Переменная названа так, начиная с заглавной буквы, потому что на самом деле это компонент. Теперь нам придется заменить наш div с DivWrapper мы только что создали. Ниже приведен код, демонстрирующий, как:

export default function Component() {
     return (
      <DivWrapper>
        <p>Hello Styled component</p>
      </DivWrapper>
     )
     }

При этом стиль, связанный с DivWrapper применяется к нашему компоненту.

Разумно отметить, что стилизованные компоненты никогда не должны объявляться внутри класса или функционального компонента, но вне их обоих.

Мы могли бы пойти дальше, чтобы стилизовать <p> тег, выполнив следующие действия:

const Paragraph = styled.p`
       font-size: 32px;
     `;

С ними мы могли бы заменить <p> с компонентом стиля «Абзац», и стили будут применены.

Стилизованные компоненты поддерживают некоторые синтаксисы, встроенные в препроцессоры, такие как Less и Sass, такие как вложение и создание миксинов.

Как и любой другой компонент реагирования, styled-component получает реквизиты и дает разработчику возможность принимать определенные решения по стилю в отношении того, что передается в качестве реквизита styled-component. Чтобы проиллюстрировать это, скажем, наш DivWrapper стилизованную оболочку, которая будет повторно использоваться другими компонентами, тогда у нас возникнет необходимость указать определенные рекомендации по стилю, которые будут различаться в зависимости от выбора разработчика, одним из таких может быть цвет фона div. Как мы можем сделать это с помощью styled-components?

Во-первых, нам нужно передать нашему стилизованному компоненту свойство цвета следующим образом:

<DivWrapper
    color="blue"
  >

  </DivWrapper>

Теперь в нашем объявлении styled-component мы должны сделать следующее:

const DivWrapper = styled.div`
    width: 50%;
    border: 2px solid black;
    ${props => (props.color === 'blue') ? `background-color: blue`: null}
    ${props => (props.color === 'red' ? `background-color: red`: null)}
  `;

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

const DivWrapper2 = styled(DivWrapper)`
        background-color: 'blue';
    `;

Когда мы используем стилизованный компонент DivWrapper2он наследует стили, ширину и границу от DivWrapper составная часть.

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