Reactでのインラインスタイリング

Question

React jsファイルに以下のスタイルを含めて、ラベルの後にアスタリスクを追加したいとします。

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

私はこれができないと思う私は、コードの下にしようとしたが、それはラベルの前に私に

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

Answer 1

をastericksを与えています。いくつかのインラインスタイルの構造はまだReactには存在しません。私はドキュメントをチェックし、あなたにリンクを提供しようとします。

JSX内でclassNameを使用し、そのクラス名のCSSファイルを参照するのはなぜですか？

---

UPDATE：

では、インラインスタイルは、あなたがしたオブジェクト—として指定され、反応します。

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); 

ベンダーは、MSが大文字で始めるべき以外の接頭辞：あなたはcamelCase形式のキースタイルの名前と値が通常の文字列であることに注意してください。このため、WebkitFilterには大文字の「W」が含まれています。例えば

、これは動作します：

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

しかし、:after動作しませんを使用してhereを説明したように。ここ

は、例えばusigのCSSである：

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