JIYIK CN >

When setting the text color of an element in React.js using inline styles <span style={{color: 'green'}}>colorful</span>, e.g. the text color will be applied only to the element to which it is added and its children.

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Some{' '}
        <span style={{color: 'white', backgroundColor: 'lime'}}>colorful</span>{' '}
        text
      </p>
    </div>
  );
};

export default App;

We use inline styles to change the text color of an element.

注意, when specified as an inline style, multi-word attributes are camelCase.

The first set of curly braces in an inline style mark the beginning of the expression, and the second set of curly braces is an object containing the style and value.

The changed text color will only be applied to the span element.

If we need to do this often, we can extract the span element into a component that renders its children.

function ColorfulText({children}) {
  return <span style={{color: 'green'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Some <ColorfulText>colorful</ColorfulText> text
      </p>
    </div>
  );
};

export default App;

Whatever we pass between the opening and closing tags of the ColorfulText component will get the specific text color applied.

Another solution is to define a class in your global css file.

.red-text {
  color: red;
}

Here is how we import the App.css file and use the red-text class.

import './App.css';

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Some <span className="red-text">colorful</span> text
      </p>
    </div>
  );
};

export default App;

This approach enables us to reuse common styles by defining them in a global css file.

It is a best practice to import global css files in your index.js file, because then they will not only be loaded when some component is mounted.