Я создаю компоненты React. Я добавил CSS встроенный в компоненты, как это предложено в этой блестящей презентации одним из парней, стоящих за Реактивом. Я пробовал всю ночь, чтобы найти способ добавления псевдоязыков CSS в ряд, например, на слайде под названием ":: после" в презентации. К сожалению, мне не нужно просто добавлять свойство content:"";, но также position:absolute; -webkit-filter: blur(10px) saturate(2);. В слайдах показано, как добавить контент через {/* … */}, но как добавить другие свойства?
Псевдоэлементы CSS в Реагировании
Ответ 1
Получил ответ от @Vjeux над командой React:
Обычный HTML/CSS:
<div class="something"><span>Something</span></div>
<style>
.something::after {
content: '';
position: absolute;
-webkit-filter: blur(10px) saturate(2);
}
</style>
Реакция со встроенным стилем:
render: function() {
return (
<div>
<span>Something</span>
<div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
</div>
);
},
Хитрость заключается в том, что вместо использования ::after в CSS для создания нового элемента вместо этого вы должны создать новый элемент через React. Если вы не хотите добавлять этот элемент повсюду, создайте компонент, который сделает это для вас.
Для специальных атрибутов, таких как -webkit-filter, способ их кодирования - удалить тире - и заглавные буквы следующей буквы. Таким образом, он превращается в WebkitFilter. Обратите внимание, что выполнение {'-webkit-filter': ...} также должно работать.
Ответ 2
Встраиваемые стили не могут использоваться для задания псевдоклассов или псевдоэлементов. Вам нужно использовать таблицу стилей.
Если вы хотите динамически генерировать CSS, то самым простым способом является создание элемента DOM <style>.
<style dangerouslySetInnerHTML={{
__html: [
'.my-special-div:after {',
' content: "Hello";',
' position: absolute',
'}'
].join('\n')
}}>
</style>
<div className='my-special-div'></div>
Ответ 3
Встраиваемый стиль не поддерживает псевдо или правила at (например, @media). Рекомендации варьируются от переопределения функций CSS в JavaScript для состояний CSS, таких как :hover через onMouseEnter и onMouseLeave, для использования большего количества элементов для воспроизведения псевдоэлементов, таких как :after и :before, чтобы просто использовать внешнюю таблицу стилей.
Лично не нравится все эти решения. Повторная реализация CSS-функций с помощью JavaScript не масштабируется хорошо - ни добавление лишней разметки.
Представьте себе большую команду, в которой каждый разработчик воссоздает CSS-функции, такие как :hover. Каждый разработчик будет делать это по-другому, поскольку команды растут в размерах, если это можно сделать, это будет сделано. Факт заключается в том, что в JavaScript существует около n способов переопределения функций CSS, и со временем вы можете делать ставки на каждый из этих способов реализации с конечным результатом, являющимся кодом спагетти.
Так что делать? Используйте CSS. Конечно, вы спросили о встроенном стиле, предполагающем, что вы, вероятно, находитесь в лагере CSS-in-JS (тоже!). Обнаружили, что colocating HTML и CSS являются столь же ценными, как colocating JS и HTML, многие люди просто не осознают этого (JS-HTML-колокейшн имел слишком много сопротивления).
Сделано решение в этом пространстве под названием Style It, которое просто позволяет писать текстовый CSS-текст в ваших компонентах React. Не нужно тратить циклы на повторное использование CSS в JS. Правильный инструмент для правильной работы, вот пример с использованием :after:
npm install style-it --save
Функциональный синтаксис (JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return Style.it(`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`,
<div id="heart" />
);
}
}
export default Intro;
Синтаксис JSX (JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return (
<Style>
{`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`}
<div id="heart" />
</Style>
}
}
export default Intro;
Пример сердца, извлеченный из CSS-Tricks