Styled components CSS преимущества и недостатки использования стилизованных компонентов


Содержание материала:

Как влиять на чужие CSS-классы при использовании только стилизованных компонентов

Я использую react-table и хотел бы применить правила CSS к классу rt-td который недоступен и не может быть изменен через то, что предлагает их API.

В CSS я просто переписал бы класс CSS из моей таблицы стилей. Но как вам это со стильными компонентами? Я слышал, что это анти паттерн, но что еще мне делать?

1 ответ

Предположим, что родительский компонент компонента ReactTable экспортируемого по react-table является простым div .

Вы можете влиять на стиль класса rt-td внутри ReactTable путем: 1) преобразования родителя ReactTable в styled-components и 2) внедрения стиля для переопределения rt-td в CSS вышеупомянутого родителя.

Является ли Styled-компонент CSS лучшим выбором, чем SASS или LESS?

Я натолкнулся на ReactJS Boilerplate, у которого были хорошие повторы, и он ориентирован на сообщество. В разделе «Стилирование» особое внимание уделялось стилевому компоненту CSS, но он не переставал переходить на обычные методологии CSS-стилей. Хотя это привлекло мое внимание к тому, что выделяет Styled-Component CSS и почему его нужно принять.

  1. Компонентно-управляемая идеология. Ваш CSS также теперь является компонентом. — Это очень круто!
  2. Загрузите то, что вам нужно и когда вам нужно, немного ленивый CSS
  3. Поставщик тем, скины, модульность и динамика — этого могут добиться и другие библиотеки
  4. Построение серверной части вашего компонента DOM и его стиль.

Мои вопросы:

Браузеры развиты для анализа CSS отдельно от синтаксического анализа Javascript, почему мы пытаемся отойти от этого и вписать все в Javascript?

CSS-компонент Styled отправляет свою библиотеку javascript клиентской стороне, которая фактически анализирует стили во время выполнения и помещает их внутрь

Поскольку он удобен в разработке, как React или Redux, так же, как jQuery, и, как и любая другая библиотека, он требует загрузки сети и производительности браузера.

Вы берете библиотеку, потому что она решает проблему. Если проблем нет, зачем вообще использовать библиотеку, верно?

Делает ли непрерывный вычисленный стиль стучать текст через

Что касается микширования SASS, они могут быть преобразованы в функции javascript, поэтому здесь нет большого преимущества для SASS.

В целом, работа со Styled-Components — это весело и легко, но имеет побочный эффект более тесной связи между стилями и каркасом / компонентом и, очевидно, имеет некоторое снижение производительности (ничего, что на самом деле не замедлит вас, но все же),

Два из четырех ключевых пунктов упомянутой вами статьи Google Reflow были следующими:

Минимизируйте правила CSS и удалите неиспользуемые правила CSS.

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

При правильном использовании это побочный продукт использования Styled-Components в React.

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

А поскольку стили, как правило, изолируются от компонента с помощью Styled Components/CSS-in-JS, мы обычно избегаем этих ужасных потомков.

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

Существует пример React / React-Bootstrap для Code Sandbox, использующего стилизованные компоненты для такой изоляции CSS, и статью, подробно описывающую подход к CSS-хитростям. В основном он сосредоточен на том, как стилизованные компоненты могут помочь вам перейти от быстрой и грязной реализации React-Bootstrap к пользовательской теме, которая в конечном итоге реорганизует зависимость React-Bootstrap. Но это также полезно для демонстрации того, как его можно использовать для достижения тех двух ключевых оптимизаций перекомпоновки, которые упомянуты в статье Google.

Другие два момента менее актуальны для обсуждения CSS против CSS-in-JS:

Уменьшите ненужную глубину DOM. Изменения на одном уровне в дереве DOM могут вызвать изменения на каждом уровне дерева — вплоть до корня и вплоть до потомков модифицированного узла. Это приводит к увеличению времени, затрачиваемого на выполнение оплавления.

Минимизируйте правила CSS и удалите неиспользуемые правила CSS. Если вы делаете сложные изменения рендеринга, такие как анимация, делайте это из потока. Используйте абсолютное положение или фиксированное положение для достижения этой цели.

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

Styled-компонент против SASS (SCSS) или LESS — css

Я наткнулся на ReactJS Boilerplate, у которого были хорошие представители и он был ориентирован на сообщество. В разделе «Стилирование» особое внимание уделено стилевому компоненту CSS, но он никогда не останавливался от перехода на обычные методологии стилевого оформления CSS. Хотя это привлекло мое внимание к тому, что выделяет Styled-Component CSS и почему его нужно принять.

Топ-пост этого месяца:  OpenCart. Модуль поиска заказа по товару. Урок 2

Мое понимание стиля CSS компонента :

  1. Компонентно-управляемая идеология. Ваш CSS также теперь является компонентом. — Это очень круто!
  2. Загрузите то, что вам нужно и когда вам нужно, немного ленивый CSS
  3. Поставщик тем, скины, модульность и динамика — этого могут добиться и другие библиотеки
  4. Построение серверной части вашего компонента DOM и его стиль.

Мои вопросы:

Браузеры развиты для анализа CSS отдельно от синтаксического анализа Javascript, почему мы пытаемся отойти от этого и вписать все в Javascript?

CSS-компонент Styled отправляет свою библиотеку javascript клиентской стороне, которая фактически анализирует стили во время выполнения и помещает их в

Поскольку он удобен в разработке, так же как и React или Redux, как и jQuery, и точно так же, как и любая другая библиотека, это связано с нагрузкой на сеть и стоимостью браузера.

Вы берете библиотеку, потому что она решает проблему. Если нет проблем, зачем использовать библиотеку вообще, правильно?

Значит ли непрерывный вычисленный текст в стиле в заголовке заголовка вызывает перезагрузку/перерисовку браузера?

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

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

Одни и те же стили между двумя типами компонентов с React Стилизованные Components

Я хотел бы применить одни и те же стили в стиле input элемента и стилизованного select элемента.

В настоящее время я использую строку интерполяции, чтобы сделать это:


Есть ли лучший способ сделать это , которое не связано с использованием «сырой» строку? Недостаток использования необработанных styles строк является то , что Visual Studio код не синтаксический выделить его:

У вас есть несколько вариантов здесь:

Вы можете использовать css маркированный шаблон буквальный:

Это должно получить правильно подсветки синтаксиса (не проверял).

Знакомство с Styled components

Предлагаем вашему вниманию перевод свежей ознакомительной статьи Cаши Грифа (Sacha Greif), соавтора книги «Discover Meteor», о специфике работы с библиотекой Styled components.
«СSS – странная штука. Его основам можно обучиться за 15 минут, но на то, чтобы найти хороший способ организации стилей, могут уйти годы.

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

Хаотичные листы стилей

Как вы, должно быть, уже испытали на себе, это нередко приводит к полной неразберихе. И хотя препроцессоры, такие, как SASS и LESS, добавляют много полезных функций, они не в состоянии подавить анархию в CSS.

Эта организационная работа была предоставлена таким методологиям как BEM, которые – хоть и полезны в этом отношении – все же не являются обязательными и не могут быть внедрены более универсально, на уровне языка или инструментов.

Новая волна CSS

Перемотаем на пару лет вперед: новая волна инструментов на базе JavaScript пытается решить эти трудности коренным образом, изменяя сам способ написания CSS.

Styled Components — это одна из таких библиотек, которая быстро привлекла к себе внимание масс из-за присущей ей смеси инноваций с привычностью. Поэтому, если вы используете React (а если нет, советую ознакомиться с моими статьями «Учебный план по JavaScript» и «Введение в React»), вам однозначно стоит взглянуть на эту альтернативу CSS.

Я недавно использовал Styled Components для редизайна личного сайта и хочу поделиться некоторыми моментами, которые я для себя выделил в процессе работы.

Главное, что нужно иметь в виду при работе с Styled Components – название следует понимать практически буквально. Вы больше не стилизуете элементы HTML или компоненты на основании их класса или HTML-элемента:

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

Разница как будто бы небольшая, и по факту оба синтаксиса очень похожи. Но ключевое отличие состоит в том, что стили теперь являются частью компонента. Другими словами, мы избавляемся от CSS-классов как от промежуточного этапа между компонентом и его стилями.

Как сказал один из создателей Styled-components Макс Стойбер:

«Основная идея styled-components заключается в том, чтобы внедрить лучшие практики путем удаления мэппинга между стилями и компонентами».

Сначала это кажется нелогичным, ведь весь смысл использования CSS вместо того, чтобы стилизовать HTML-элементы напрямую (помните тэг font?), был в том, чтобы разделить стили и разметку путем введения классов как промежуточного слоя.

Но подобное разъединение также создает много сложностей, и на этом основании можно утверждать, что «настоящий» язык программирования — такой, как JavaScript, — больше подходит для того, чтобы исправить эти трудности, чем CSS.

Props, а не классы

Придерживаясь этой «не-классовой» философии, styled-components используют props вместо классов для всего, что касается кастомизации поведения компонента.

Итак, вместо этого:

Как видите, styled-components позволяют вам очистить компоненты в React, вынося все, что связано с имплементацией CSS и HTML, за их пределы.

Тем не менее, styled-components CSS – это все-таки тоже CSS. Поэтому такой код тоже вполне приемлем, хотя и не совсем обычен:

Это одна из особенностей, которая делает styled-components очень простым для понимания инструментом: когда закрадываются сомнения, вы всегда можете вернуться к тому, что знаете!

Важно также отметить, что styled-components еще молодой проект и некоторые его фишки до сих пор не поддерживаются полностью. Например, если вы хотите повторить стиль родительского компонента в дочернем, на данный момент вам придется воспользоваться CSS классами (по крайней мере, пока не выйдет styled-components v2).

Также сейчас не существует «законного» способа, чтобы проводить предварительный рендеринг на вашем CSS на сервере, хотя это определенно можно сделать путем введения стилей вручную.

Кроме того, styled-components создают свои рандомные имена классов, что может сделать затруднительным использование «инструментов разработчика» вашего браузера для поиска первоначального определения места отображения ваших стилей.

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

Моя цель в этой статье заключалась не в том, чтобы детально объяснить, как работают styled-components, а больше в том, чтобы дать маленькую наводку, чтобы вы сами могли решить, интересно ли вам это.

Если мне удалось пробудить в вас интерес, вот некоторые ресурсы, на которых вы можете узнать о styled-components больше:

  • Макс Стойбер недавно написал статью о смысле styled-components на ресурсе Smashing Magazine
  • Репозиторий styled-components сам по себе имеет обширную документацию
  • Статья Джеми Диксона показывает несколько плюсов использования styled-components
  • Если вы хотите узнать больше о том, как библиотека работает на практике, прочитайте вот эту статью от Макса.

И если вы вдруг захотите углубиться в тему, можете также посмотреть Glamor – другой взгляд на CSS новой волны!»

Advanced Usage

styled-components has full theming support by exporting a wrapper component. This component provides a theme to all React components underneath itself via the context API. In the render tree all styled-components will have access to the provided theme, even when they are multiple levels deep.

returns its children when rendering, so it must only wrap a single child node as it may be used as the root of the render() method.

To illustrate this, let’s create our Button component, but this time we’ll pass some variables down as a theme.

You can also pass a function for the theme prop. This function will receive the parent theme, that is from another higher up the tree. This way themes themselves can be made contextual.

This example renders our above themed Button and a second one that uses a second ThemeProv >invertTheme receives the upper theme and creates a new one.

If you ever need to use the current theme outs >withTheme higher order component.

You can also use useContext to access the current theme outside of styled components when working with React Hooks.

A theme can also be passed down to a component using the theme prop.


This is useful to circumvent a missing ThemeProvider or to override it.

Passing a ref prop to a styled component will give you one of two things depending on the styled target:

  • the underlying DOM node (if targeting a basic element, e.g. styled.div )
  • a React component instance (if targeting a custom component e.g. extended from React.Component )

Using an older version of styled-components (below 4.0.0) or of React? Use the innerRef prop instead.

Since styled-components allows you to use arbitrary input as interpolations, you must be careful to sanitize that input. Using user input as styles can lead to any CSS being evaluated in the user’s browser that an attacker can place in your application.

This example shows how bad user input can even lead to API endpoints being called on a user’s behalf.

Be very careful! This is obviously a made-up example, but CSS injection can be unobvious and have bad repercussions. Some IE versions even execute arbitrary JavaScript within url declarations.

Топ-пост этого месяца:  24PayBank — быстрый надежный обменник с большими резервами

There is an upcoming standard to sanitize CSS from JavaScript, CSS.escape . It’s not very well supported across browsers yet, so we recommend using the polyfill by Mathias Bynens in your app.

There are a couple of implementation details that you should be aware of, if you choose to use styled-components together with existing CSS.

styled-components generates an actual stylesheet with >className prop. It injects the generated stylesheet at the end of the head of the document during runtime.

If you use the styled(MyComponent) notation and MyComponent does not render the passed-in className prop, then no styles will be applied. To avoid this issue, make sure your component attaches the passed-in className to a DOM node:

If you have pre-existing styles with a class, you can combine the global class with the passed-in one:

If you apply a global class together with a styled component class, the result might not be what you’re expecting. If a property is defined in both classes with the same specificity, the last one will win.

In the above example the styled component > by default. Thus its styles win over other single classname selectors.

One solution is to bump up the specificity of the selectors in your stylesheet:

If you deploy styled-components on a page you don’t fully control, you may need to take precautions to ensure that your component styles don’t conflict with those of the host page.

The most common problem is insufficient specificity. For example, consider a host page with this style rule:

Since the rule contains a classname and two tag names, it has higher specificity than the single classname selector generated by this styled component:

There’s no way to give your components complete immunity from the host page’s styles, but you can at least boost the specificity of their style rules with babel-plugin-styled-components-css-namespace, which allows you to specify a CSS namespace for all of your styled components. A good namespace would be something like #my-widget , if all of your styled-components render in a container with , since ID selectors have more specificity than any number of classnames.

A rarer problem is conflicts between two instances of styled-components on the page. You can avo >process.env.SC_ATTR in the code bundle with your styled-components instance. This value overr >

Once you pass interpolations, the array contains the passed string, split at the positions of the interpolations. The rest of the arguments will be the interpolations, in order.

This is a bit cumbersome to work with, but it means that we can receive variables, functions, or mixins ( css helper) in styled components and can flatten that into pure CSS.

If you want to learn more about tagged template literals, check out Max Stoiber’s article: The magic behind �� styled-components

styled-components supports concurrent server s >ServerStyleSheet and add a provider to your React tree, that accepts styles via a context API.

This doesn’t interfere with global styles, such as keyframes or createGlobalStyle and allows you to use styled-components with React DOM’s various SSR APIs.

In order to reliably perform server side rendering and have the client side bundle pick up without issues, you’ll need to use our babel plugin. It prevents checksum mismatches by adding a deterministic ID to each styled component. Refer to the tooling documentation for more information.

For TypeScript users, our resident TS guru Igor Oleinikov put together a TypeScript plugin for the webpack ts-loader / awesome-typescript-loader toolchain that accomplishes some similar tasks.

If possible, we definitely recommend using the babel plugin though because it is updated the most frequently. It’s now possible to compile TypeScript using Babel, so it may be worth switching off TS loader and onto a pure Babel implementation to reap the ecosystem benefits.

The basic API goes as follows:

The collectStyles method wraps your element in a prov >StyleSheetManager provider directly, instead of this method. Just make sure not to use it on the client-side.

After client-side rehydration is complete, styled-components will take over as usual and inject any further dynamic styles after the relocated streaming ones.

There are many ways to apply contextual overrides to a component’s styling. That being said, it rarely is easy without rigging up a well-known targeting CSS selector paradigm and then making them accessible for use in interpolations.

styled-components solves this use case cleanly via the «component selector» pattern. Whenever a component is created or wrapped by the styled() factory function, it is also assigned a stable CSS class for use in targeting. This allows for extremely powerful composition patterns without having to fuss around with naming and avoiding selector collisions.

A practical example: here, our Icon component defines its response to the parent Link being hovered:

We could have nested the color-changing rule within our Link component, but then we’d have to consider both sets of rules to understand why Icon behaves as it does.

This behaviour is only supported within the context of Styled Components: attempting to mount B in the following example will fail because component A is an instance of React.Component not a Styled Component.

The error thrown — Cannot call a class as a function — occurs because the styled component is attempting to call the component as an interpolation function.

However, wrapping A in a styled() factory makes it eligible for interpolation — just make sure the wrapped component passes along className .

styled-components optionally supports writing CSS as JavaScript objects instead of strings. This is particularly useful when you have existing style objects and want to gradually move to styled-components.

Знакомство со Styled components

Что такое Styled components и как его использовать.

Styled Components являются одним из новых способов использования CSS в современном JavaScript. Они предназначен для написания CSS, который ограничен одним компонентом.

Что важно понять о Styled Components, так это то, что его название следует понимать буквально. Ты больше не стилизуешь элементы HTML на основе их класса:

Вместо этого ты определяешь стилизованные компоненты, которые имеют свои собственные инкапсулированные стили:

Styled Components позволяют писать простой CSS в компонентах, не беспокоясь о конфликтах имен классов.


Просто установи styled-components, используя npm или yarn:

Настоятельно рекомендуется (но не обязательно) использовать плагин Babel. Он предоставляет множество преимуществ, таких как более разборчивые имена классов, совместимость рендеринга на стороне сервера, небольшие пакеты и многое другое.

Первый Styled Component

Styled Components используют шаблонные строки (template literals) для стилизации компонентов; это простой JavaScript и способ передачи аргумента функции.

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

Импортировав styled объект, можно начать создавать стилизованные компоненты. Например:

styled-components автоматически добавляют все необходимые вендорные префиксы, поэтому тебе больше не нужно об этом беспокоиться!

Кастомизация компонентов с помощью props

Когда ты передаешь props в Styled Component, то они передаются нижестоящим DOM узлам.

Например, вот как мы передаем placeholder и type компоненту input :

Он, вставит эти props в качестве атрибутов HTML. Также, на основе значений этих props, можно кастомизировать компонент. Например:

Добавив primary prop, мы поменяли цвет и фон кнопки.

Разширение стилей компонента

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

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

Ты можешь использовать полиморфный prop as , чтобы динамически поменять элемент, который получает твои стили:

Это также работает и с кастомными компонентами!

Если ты по-прежнему используешь более старую чем v4 версию, ты можешь использовать .withComponent или .extend API для достижения того же результата, что и при использовании свойства “as”. Но имей в виду, что это не рекомендуется, так как с v4 .extend был удален, а .withComponent в будущем больше не будет поддерживаться.

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

Метод styled() отлично работает на всех собственных или сторонних компонентах, если они используют переданный prop className элементу DOM.

Ты также можешь передавать имена тегов в вызов фабрики styled() , например: styled(«div») . На самом деле styled.tagname — это просто псевдонимы, которые делают то же самое.

Обрати внимание, что мы добавили префикс “Styled” в StyledLink , чтобы React компонент Link и стилизованный компонент StyledLink не конфликтовали с именами, а оставались легко идентифицируемыми в React Developer Tools и Web Inspector.

Определение стилизованного компонента вне метода render

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

Топ-пост этого месяца:  15 распространенных ошибок при дизайне сайтов для интернет-магазинов

Псевдоэлементы, псевдо-селекторы и вложенность

Псевдо-селекторы и псевдоэлементы без дальнейшей доработки автоматически присоединяются к компоненту:

Для более сложных шаблонов, амперсанд (&) может использоваться для обращения к основному компоненту. Если ты используешь селекторы без амперсанда, они будут ссылаться на дочерние элементы компонента.

Также, амперсанд может быть использован для повышения специфичности правил для компонента; это может быть полезно, если ты имеешь дело со смесью стилевых компонентов и vanilla CSS, где могут быть конфликтующие стили:

Customizing components

Вы можете легко настроить внешний вид компонента Material-UI.

Поскольку компоненты могут использоваться в разных контекстах, существует несколько подходов к этому. Going from the narrowest use-case to the broadest, these are:

1. Конкретное изменение для единичного случая

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

Переопределение стилей через имена классов

Первый способ переопределения стиля компонента — использовать имена классов. Каждый компонент предоставляет свойство className которое всегда применяется к корневому элементу.

В этом примере компонент высшего-порядка withStyles() используется для внедрения пользовательских стилей в DOM и передачи имени класса компоненту ClassNames через его свойство classes . Для создания стилей вы можете воспользоваться любым доступным стилевым решением, вплоть до обычного CSS, но вы обязаны принимать во внимание порядок внедрения CSS, поскольку CSS внедренный в DOM через Material-UI имеет максимально возможную специфичность, так как
внедряется в самом конце раздела для гарантии корректного отображения компонентов.

Overr >

Когда className свойства недостаточно, и вам нужен доступ ко вложенным элементам, вы можете воспользоваться свойством объекта classes для настройки всех CSS, внедренных через Material-UI для данного компонента.

Список классов, доступных для каждого компонента представлен на странице API-документации компонента. Обратитесь к разделу ** CSS ** и ищите в столбце с именем правила. Для примера можете взглянуть на Button CSS API. Кроме того, вы можете воспользоваться встроенными в браузер инструментами разработчика.

В этом примере также используется withStyles() (см. выше), но теперь ClassesNesting присваивает свойству classes компонета Button обьект сопоставляющий имена переопределяемых классов (стилевые правила) с *именам использумых классов CSS * (значениями). Существующие классы компонента будут по прежнему внедряться, поэтому необходимо указать только те стили, которые вы хотите добавить или переопределить.

Обратите внимание, что в дополнение к стилю кнопки, стиль текста кнопки был изменен на стиль с заглавными буквами:

Переопределение стилей через глобальные имена классов

Использование инструментов разработчика

Инструменты разработчика браузера могут сэкономить вам много времени. В режиме разработки имена классов Material-UI следуют простому шаблону: Mui[имя компонента]-[имя стилевого правила]-[UUID] .


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

Используя инструменты разработчика, вы знаете, что вам нужно нацелиться на компонент Button и стилевое правило label :

Краткая запись

Приведенный выше пример кода может быть сокращен за счет использования *того же CSS API * в качестве дочернего компонента. В этом примере компонент высшего порядка withStyles() внедряет свойство classes , используемое затем компонентом Button .

Pseudo- >

Особые состояния компонент, такие как * наведение (hover), * фокус *, *disabled и selected, стилизованы при помощи CSS с более высокой специфичностью. Специфичность — это весовой коэффициент применяемый к данной декларации CSS.

Чтобы переопределить особые состояния компонентов, вам нужно увеличить специфичность. Вот пример с disable состоянием и компонентом кнопка использующим псевдокласс ( :disabled ):

Иногда вы не можете использовать псевдо-класс, так как это состояние в платформе отсутствует. В качестве примера можно привести компонент пункт меню и состояние выбрано. Aside from accessing nested elements, the classes property can be used to customize the special states of Material-UI components:

Почему я должен повышать специфичность для переопределения отдельного состояния компонента?

Спецификация CSS, по определению, обязывает псевдоклассы повышать специфичность. For consistency, Material-UI increases the specificity of its custom pseudo-classes. This has one important advantage, it allows you to cherry-pick the state you want to customize.

Can I use a different API that requires fewer boilerplate?

Instead of providing values to the classes prop API, you can rely on the global class names generated by Material-UI. It implements all these custom pseudo-classes:

classes key Global class name
checked Mui-checked
disabled Mui-disabled
error Mui-error
focused Mui-focused
focusVisible Mui-focusVisible
required Mui-required
expanded Mui-expanded
selected Mui-selected

Используйте $ruleName для ссылки на правило в той же таблице стилей

Плагин jss-nested (доступный по умолчанию) позволяет упростить процесс повышения специфичности.

⚠️ ️ Чтобы это сработало, вам нужно применить к DOM оба сгенерированных имени класса ( root & disabled ).

Является ли Styled-компонент CSS лучшим выбором, чем SASS или LESS?

Я натолкнулся на ReactJS Boilerplate, у которого были хорошие повторы, и он ориентирован на сообщество. В разделе «Стилирование» особое внимание уделялось стилевому компоненту CSS, но он не переставал переходить на обычные методологии CSS-стилей. Хотя это привлекло мое внимание к тому, что выделяет Styled-Component CSS и почему его нужно принять.

  1. Компонентно-управляемая идеология. Ваш CSS также теперь является компонентом. — Это очень круто!
  2. Загрузите то, что вам нужно и когда вам нужно, немного ленивый CSS
  3. Поставщик тем, скины, модульность и динамика — этого могут добиться и другие библиотеки
  4. Построение серверной части вашего компонента DOM и его стиль.

Мои вопросы:

Браузеры развиты для анализа CSS отдельно от синтаксического анализа Javascript, почему мы пытаемся отойти от этого и вписать все в Javascript?

CSS-компонент Styled отправляет свою библиотеку javascript клиентской стороне, которая фактически анализирует стили во время выполнения и помещает их внутрь

Поскольку он удобен в разработке, как React или Redux, так же, как jQuery, и, как и любая другая библиотека, он требует загрузки сети и производительности браузера.

Вы берете библиотеку, потому что она решает проблему. Если проблем нет, зачем вообще использовать библиотеку, верно?

Делает ли непрерывный вычисленный стиль стучать текст через

Что касается микширования SASS, они могут быть преобразованы в функции javascript, поэтому здесь нет большого преимущества для SASS.

В целом, работа со Styled-Components — это весело и легко, но имеет побочный эффект более тесной связи между стилями и каркасом / компонентом и, очевидно, имеет некоторое снижение производительности (ничего, что на самом деле не замедлит вас, но все же),

Два из четырех ключевых пунктов упомянутой вами статьи Google Reflow были следующими:

Минимизируйте правила CSS и удалите неиспользуемые правила CSS.

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

При правильном использовании это побочный продукт использования Styled-Components в React.

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

А поскольку стили, как правило, изолируются от компонента с помощью Styled Components/CSS-in-JS, мы обычно избегаем этих ужасных потомков.

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

Существует пример React / React-Bootstrap для Code Sandbox, использующего стилизованные компоненты для такой изоляции CSS, и статью, подробно описывающую подход к CSS-хитростям. В основном он сосредоточен на том, как стилизованные компоненты могут помочь вам перейти от быстрой и грязной реализации React-Bootstrap к пользовательской теме, которая в конечном итоге реорганизует зависимость React-Bootstrap. Но это также полезно для демонстрации того, как его можно использовать для достижения тех двух ключевых оптимизаций перекомпоновки, которые упомянуты в статье Google.

Другие два момента менее актуальны для обсуждения CSS против CSS-in-JS:

Уменьшите ненужную глубину DOM. Изменения на одном уровне в дереве DOM могут вызвать изменения на каждом уровне дерева — вплоть до корня и вплоть до потомков модифицированного узла. Это приводит к увеличению времени, затрачиваемого на выполнение оплавления.

Минимизируйте правила CSS и удалите неиспользуемые правила CSS. Если вы делаете сложные изменения рендеринга, такие как анимация, делайте это из потока. Используйте абсолютное положение или фиксированное положение для достижения этой цели.

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

Как влиять на чужие CSS-классы при использовании только стилизованных компонентов

Я использую react-table и хотел бы применить правила CSS к классу rt-td который недоступен и не может быть изменен через то, что предлагает их API.

В CSS я просто переписал бы класс CSS из моей таблицы стилей. Но как вам это со стильными компонентами? Я слышал, что это анти паттерн, но что еще мне делать?

1 ответ

Предположим, что родительский компонент компонента ReactTable экспортируемого по react-table является простым div .

Вы можете влиять на стиль класса rt-td внутри ReactTable путем: 1) преобразования родителя ReactTable в styled-components и 2) внедрения стиля для переопределения rt-td в CSS вышеупомянутого родителя.

Добавить комментарий