web-dev-qa-db-fra.com

Comment définir la couleur du texte dans React JS

Je veux juste changer la couleur du texte en utilisant le style dans la balise

Comment puis je faire ça?

<div id="root"></div><br>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script><br>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script><br>

<script type="text/babel">
const rootElement = document.getElementById('root');<br>
const element = <h1>Hello world</h1><br>

ReactDOM.render(element, rootElement);<br>
</script>
javascripthtmlreactjs
7
Just Ahead

Vous pouvez utiliser un style en ligne comme:

const element = <h1 style={{ color: 'red' }}>Hello world</h1>

ou

const hStyle = { color: 'red' };
const element = <h1 style={ hStyle }>Hello world</h1>

Pour plus d'informations:

Démo: 

const rootElement = document.getElementById('root');
const element = <h1 style={{ color: 'red' }}>Hello world</h1>;
ReactDOM.render(element, rootElement);
<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>
7
palaѕн

Vous pouvez le faire comme ci-dessous:

<h1 style={{color: 'red'}}>Hello world</h1>

React traite l'attribut style comme un objet. Nous devons donc fournir des guillemets doubles "{{}}" et à l'intérieur se trouve notre code CSS. La notation doit également être camel-case. par exemple. {{backgroundColor: 'red'}}

2
Ricks

balise style dans index.html

<style>
  .textColor{
     color : 'red'
  }
<style>

Utilisation : <h1 className="textColor">text colors</h1>

en ligne:

<h1 style={{ color: 'red' }}>inline styling</h1>

Utilisation de objet de style

const styles= {
    color: 'red',
};
<h1 style={styles}>Style obje</h1>
2
Revansiddh

Vous pouvez utiliser un fichier CSS externe, puis l'importer dans votre code

Vous pouvez également utiliser Inline CSS

<NavLin / to="/home" activeStyle={{ color:'green', fontWeight: 'bold'}}> Home </NavLin>

L'objet de style peut être rempli ici 

activeStyle={{ color:'green', fontWeight: 'bold'}}
2
Rajat