How to set color to text in React JS

后端 未结 4 1485
伪装坚强ぢ
伪装坚强ぢ 2021-02-19 09:15

I just want to change color of text using style in tag

How can I do that?


相关标签:
4条回答
  • 2021-02-19 09:43

    You can use inline-style like:

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

    or

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

    For more info:

    • Inline Styles

    Demo:

    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>

    0 讨论(0)
  • 2021-02-19 09:43

    style tag in index.html

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

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

    Inline:

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

    Using Style Object

    const styles= {
        color: 'red',
    };
    <h1 style={styles}>Style obje</h1>
    
    0 讨论(0)
  • 2021-02-19 09:46

    You can use external css file and then import it in your code

    You can also use Inline CSS

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

    Object of style can be populated here

    activeStyle={{ color:'green', fontWeight: 'bold'}}
    
    0 讨论(0)
  • 2021-02-19 09:57

    You can do it like below :

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

    React treats style attribute as an object. So we have to provide double quotes "{{ }}" and inside that is our css code. Also the notation should be camel-case. e.g. {{backgroundColor: 'red'}}

    0 讨论(0)
提交回复
热议问题