React技巧之设置行内样式

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

正文从这开始~

在React中设置行内样式：

将元素的


      style

prop设置为对象。

为元素的样式设置指定的属性和值。

比如说，


      <div style={{backgroundColor: 'salmon', color: 'white'}}>

。

// App.js
const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  const elementWidth = 150;
  return (
      {/* 👇️ set inline styles directly */}
			{/* 👇️ 直接设置行内样式 */}
      <div style={{backgroundColor: 'salmon', color: 'white'}}>
        Some content
      </div>
      {/* 👇️ set inline styles using an object variable */}
      {/* 👇️ 使用对象变量设置行内样式 */}
      <div style={stylesObj}>Some content</div>
      {/* 👇️ set inline styles conditionally using a ternary */}
      {/* 👇️ 使用三元运算符设置行内样式 */}
        style={{
          backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
          color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
        Some content
      </div>
      {/* 👇️ set inline styles interpolating a variable into a string */}
      {/* 👇️ 在字符串中插入变量，来设置行内样式 */
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        Some content
      </div>
    </div>
export default App;
上述代码示例展示了多种方式，用来在React的元素上设置行内样式。
直接设置行内样式
第一个示例是直接在元素上设置行内样式。
<div style={{backgroundColor: 'salmon', color: 'white'}}>
  Some content
需要注意的是，当在style对象上设置样式时，多单词属性诸如background-color 需要设置为驼峰样式。style属性的值被包装在两对花括号中。
行内样式的第一对花括号标志着表达式的开始，第二对花括号是包含样式和值的对象。
提取到变量中
第二个示例将样式对象提取到一个变量中。
const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  return (
      {/* 👇️ set inline styles using an object variable */}
      <div style={stylesObj}>Some content</div>
    </div>
export default App;
当你有多个元素共享相同的样式时，你可以使用该方法。
三元运算符
在React中，可以使用三元运算符来有条件地设置行内样式。
  style={{
    backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
    color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
  Some content
三元运算符与if/else语法非常相似。
问号前的部分会被计算，如果它返回一个真值(truthy)，运算符会返回冒号前的值，否则会返回冒号后的值。
示例中的三元运算符检查字符串hi的length属性是否等于2 ，如果等于，则返回字符串violet作为backgroundColor属性的值；否则返回字符串mediumblue作为backgroundColor属性的值。
模板字符串
在设置行内样式时，还可以用字符串插入表达式或变量。
const App = () => {
  const elementWidth = 150;
  return (
      {/* 👇️ set inline styles interpolating a variable into a string */}
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        Some content
      </div>
    </div>
export default App;
在设置样式时，我们使用模板字面量来连接字符串和变量。示例中div元素的width属性被设置为150px。
请注意，字符串是用反引号``括起来的，而不是单引号。
美元符号标志和花括号语法允许我们使用占位符来求值。
包装器组件
React中一个常用的模式是提取父组件，使用预定义的样式来渲染childrenprop。
function BoldText({children}) {
  return <span style={{fontWeight: 'bold'}}>{children}</span>;
const App = () => {
  return (
        Hello <BoldText>World</BoldText>
    </div>
export default App;
这是一个非常简单的示例，但是BoldText组件在一个元素上设置了一些样式，并渲染了它的children prop。
此方法通常用于定义具有通用样式的包装器组件。
css文件
在React中编写行内样式的另一种选择是，在扩展名为.css的文件中编写样式。
/* App.css */
.bg-salmon {
  background-color: salmon;
.text-white {
  color: white;
.font-lg {
  font-size: 2rem;
  padding: 10px 10px;
下面是导入并使用这些类的方式。
// 👇️ import css file
import './App.css';
const App = () => {
  return (
      <p className="bg-salmon text-white font-lg">hello world</p>
    </div>
export default App;
当在React中导入全局css文件时，最佳实践是将css文件导入到index.js文件中。