如何在 React 中设置文本颜色

作者

在 React 中设置文本颜色

How to set Text color in React

在 React.js 中使用内联样式设置元素的文本颜色，例如
<span style={{color: 'green'}}>colorful</span>. 文本颜色只会应用于添加它的元素及其子元素。

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

export default App;

反应样式文本颜色

我们使用内联样式来更改元素的文本颜色。

请注意，当指定为内联样式时，多词属性是驼峰式的。

内联样式中的第一组花括号标记表达式的开始，第二组花括号是包含样式和值的对象。

更改后的文本颜色只会应用于span元素。

如果您需要经常这样做，您可以将元素提取span到呈现其子元素的组件中。

应用程序.js
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;

无论我们在组件的开始标签和结束标签之间传递什么，ColorfulText
都将应用特定的文本颜色。

另一种解决方案是在全局css文件中定义一个类。

应用程序.css
.red-text {
  color: red;
}

下面是我们将如何导入App.css文件和使用red-text类。

应用程序.js
import './App.css';

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

export default App;

设置文本颜色全局 css

css这种方法使我们能够通过在全局文件中定义常用样式来重用它们。

css将全局文件导入文件中是最佳做法，index.js因为这样它们就不会仅在安装特定组件时加载。

–

发表评论