如何在 React 中设置文本颜色

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

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

export default App;

如何在 React 中设置文本颜色

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

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

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

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

如果我们需要经常这样做,则可以将 span 元素提取到呈现其子项的组件中。

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 文件中定义一个类。

.red-text {
  color: red;
}

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

import './App.css';

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

export default App;

如何在 React 中设置文本颜色

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

在 index.js 文件中导入全局 css 文件是最佳实践,因为这样它们不仅会在安装某些组件时被加载。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 如何在 React 中设置文本颜色