Почему не работате стиль :before в React компоненте?

Question

[Alex Krynytskyi]

import React from 'react';
import "./redtext.css";

const RedT = (props) => {

	let redTextStyle = {
		color:"red",
		postion:"relative",
		display:"block",
		"::before": {
			position: "absolute",
			content: "test",
			width: "100%",
			height: "20px",
			backgroundColor: "red",
			right: 0,
			bottom: 0,
			zIndex: -1,
		
		}
	}

	return (
		<span style={redTextStyle}
		
		>
			{props.children}
		</span>
	);
};

export default RedT;

Comments

[Валерий Воронков]

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

[Alex Krynytskyi]

Валерий Воронков, Оно даже его не рендерит. вот я и не могу понять как правильно записать.
Хочу управлять псевдоэлементом через пропс.

[Валерий Воронков]

Со styled-компонентами я делал так
styled-компонент
Просто, как у Вас - с таким не сталкивался.

Answer 1

[0xD34F]

"::before": {

"&::before": {

content: "test",

content: '"test"',

UPD. Вынесено из комментариев:

не помогло

Виноват, вопрос прочитал не полностью - увидел вложенный css и сразу побежал ответ сочинять. Нет, так как хотите, сделать не получится - вложенного css нет без препроцессоров (пока нет), задавать стили псевдоклассам через атрибут style нельзя. Так что придётся определить класс и назначать его через className. Есть штуки, по типу react-jss или styled-components, позволяющие писать css код внутри js кода, будет похоже на то, что вы пытались сделать (собственно, мне и показалось, что вы какую-то из этих штук используете) - например.

Comments

[Alex Krynytskyi]

не помогло (