Inline styling with React

Question

Я хочу включить ниже стиль в файл React js, чтобы добавить звездочку после метки.

.required:after { 
color: #e32; 
content: ' *'; } 

Я попытался ниже код, но это дает мне astericks перед тем ярлыком

const styles = { 
    required: 
     { 
    after: 
     { 
    content: "*", 
    color: "red" 
     } 
     }}; 

Answer 1

Я думаю, что это не возможно. Некоторые конструкции встроенных стилей еще не представлены в React. Я попытаюсь проверить документацию и предоставить вам ссылку.

Почему вы не используете className внутри своего JSX и ссылаетесь на файл CSS для этого имени класса?

---

UPDATE:

В React, встроенные стили определяются как объекты —, которые вы сделали. Вы обратите внимание на camelCased ключевые имена стилей и значения обычно являются строками:

var divStyle = { 
    color: 'white', 
    backgroundImage: 'url(' + imgUrl + ')', 
    WebkitTransition: 'all', // note the capital 'W' here 
    msTransition: 'all' // 'ms' is the only lowercase vendor prefix 
}; 

React.render(<div style={divStyle}>Hello World!</div>, mountNode); 

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

Например, это будет работать:

return (
     <div> 
      <span>Something</span> 
      <div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} /> 
     </div> 
    ); 

Однако, как объяснялось here использованием :after не будет работать.

Вот пример usig УС:

class Example extends React.Component { 
 

 
    render() { 
 
    return (<div className = "required">Test</div>); 
 
    } 
 
} 
 

 
ReactDOM.render(< Example/> , document.getElementById('root'));

.required:after { 
 
color: #e32; 
 
content: ' *'; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 2

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

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

Вы можете проверить подобный подход здесь, в этом вопросе: CSS pseudo elements in React