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

Styled-components — это библиотека, созданная для разработчиков React и React Native. Это позволяет вам использовать стили на уровне компонентов в ваших приложениях. Он использует смесь JavaScript и CSS с использованием техники, называемой CSS-in-JS.

Он приобретает все большую актуальность в современной фронтенд-разработке и особенно в сообществе React. Styled-components позволяет разработчикам React писать простой CSS в компонентах React, не беспокоясь о конфликте имен одних и тех же классов в области действия приложения.

Что такое SASS или SCSS?

SASS (Syntactically Awesome Style Sheets) — это язык сценариев препроцессора, который интерпретируется или компилируется в каскадные таблицы стилей (CSS). Sass изначально создавался с использованием определенного синтаксиса стилей, основанного на отступах.
Позже был создан синтаксис Scss(Sassy CSS), который больше напоминал CSS с той же функциональностью, что и Sass. Следовательно, Scss попадает в ту же категорию, что и Sass.

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

Почему стилизованные компоненты предпочтительнее CSS?

1. Styled-components обеспечивают архитектуру на основе компонентов.

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

/* ScssButtonExperienceStyles.jsx */
import styled from 'styled-components';

export const Button = styled.button`
    border-radius: 4px;
    border: solid 1px #d4d7dc;
    background-color: #3784d7;
    color: white;
`;
//ScssButtonExperience.jsx

import React from 'react';
import { Button } from './ScssButtonExperienceStyles';

const StyledButtonExperience = () => {
    return (
        <div>
            <Button>I am a primary button!</Button>
        </div>
        
    );
};

export default StyledButtonExperience;

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

2. Изменения в стилизованных компонентах контролируются реквизитами.

Стилизованную основную кнопку, созданную выше, можно отредактировать для поддержки различных типов кнопок с помощью реквизита —

/* ScssButtonExperienceStyles.jsx */
import styled from 'styled-components';

export const Button = styled.button`
    border-radius: 4px;
    border: solid 1px #d4d7dc;
    background-color: ${props => props.primary ? '#3784d7' : '#ffffff' };
    color: ${props => props.primary ? '#ffffff' : '#5a5a5a' };
`;

export default { Button };
//ScssButtonExperience.jsx

import React from 'react';
import { Button } from './ScssButtonExperienceStyles';

const StyledButtonExperience = () => {
    return (
        <div>
            <Button primary>I am a primary button!</Button>
            <Button>I am a secondary button</Button>
        </div>
        
    );
};

export default StyledButtonExperience;

Обратите внимание, как стилизованная кнопка компонента просто визуализировала два разных взаимодействия с использованием реквизита с очень небольшим изменением кода! С большими приложениями это становится очень полезной возможностью.

3. Поддерживает тему из коробки

Большинство веб-сайтов используют подход, основанный на теме, для создания удобного UX и обеспечения доступности. Добавление любой темы (например, темного режима) в ваше приложение может быть сложным и трудоемким. Однако стилизованные компоненты упрощают этот процесс. Вы можете добавлять темы в свое приложение, просто экспортируя компонент оболочки ‹ThemeProvider›.

//ThemedButtonExperience.jsx

import React from 'react';
import styled from 'styled-components';
import { Button } from './StyledButtonExperienceStyles';
import { ThemeProvider } from 'styled-components';

const LightButton = styled(Button)`
    background-color: ${props => props.theme.light.background};
    color: ${props => props.theme.light.fontColor};
`;

const DarkButton = styled(Button)`
    background-color: ${props => props.theme.dark.background};
    color: ${props => props.theme.dark.fontColor};
`;

const ThemedButtonExperience = ({theme}) => {
    return (
        <div>
          <ThemeProvider theme={theme}>
            <LightButton>Light button</LightButton>
            <DarkButton>Dark button</DarkButton>
          </ThemeProvider>
        </div>
        
    );
};

export default ThemedButtonExperience;

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

Мы также повторно использовали базовую стилизованную кнопку из предыдущих примеров. Это позволило повторно использовать существующие стили, уменьшить дублирование кода и сэкономить время разработчика. Стилизованные компоненты очень многоразовые!

Недостаток — производительность

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

Для приложений, использующих стилизованные компоненты, браузер загружает CSS и анализирует его с помощью JavaScript, прежде чем внедрять их на страницу. Это может привести к проблемам с производительностью, поскольку пользователь должен загрузить много JavaScript при начальной загрузке.

Заключение

Переход от SCSS к styled-components в проекте React может дать ряд преимуществ, таких как улучшенная читаемость, уменьшение раздувания CSS и лучшая поддержка тем и динамических стилей.

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

Ссылки

https://sass-lang.com/guide

https://styled-components.com/

https://flaviocopes.com/styled-components/

https://www.makeuseof.com/styled-components-react-pros-cons/