迹忆客 专注技术分享

在 React 中设置内联样式：

• 将元素上的样式属性设置为对象。
• 设置特定的 CSS 属性和值来设置元素的样式。
• 例如，<div style={{backgroundColor: 'salmon', color: 'white'}}>。

const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  const elementWidth = 150;

  return (
    <div>
      {/* 👇️ 直接设置内联样式 */}
      <div style={{backgroundColor: 'salmon', color: 'white'}}>
        迹忆客
      </div>

      <br />

      {/* 👇️ 使用对象变量设置内联样式 */}
      <div style={stylesObj}>迹忆客</div>

      <br />

      {/* 👇️ 使用三元有条件地设置内联样式 */}
      <div
        style={{
          backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
          color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
        }}
      >
        迹忆客
      </div>

      <br />

      {/* 👇️ 设置内联样式将变量插入字符串 */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        迹忆客
      </div>
    </div>
  );
};

export default App;

代码示例展示了在 React.js 中的元素上设置内联样式的多种方法。

第一个示例直接在元素上设置样式。

<div style={{backgroundColor: 'salmon', color: 'white'}}>
  迹忆客
</div>

请注意，在样式对象上设置时，像 background-color 这样的多词属性是驼峰式的。

style 属性的值包含在 2 组花括号中。

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

第二个示例将样式对象提取到变量中。

const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  return (
    <div>
      {/* 👇️ 使用对象变量设置内联样式 */}
      <div style={stylesObj}>迹忆客</div>
    </div>
  );
};

export default App;

当我们有多个共享相同样式的元素时，您可以使用此方法。

我们还可以使用三元运算符有条件地在 React 中设置内联样式。

<div
  style={{
    backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
    color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
  }}
>
  迹忆客
</div>

三元运算符与 if/else 语句非常相似。

问号之前的部分被评估，如果它返回一个真值，则运算符返回冒号之前的值，否则返回冒号之后的值。

示例中的三元运算符检查字符串 hi 的长度是否等于 2，如果是，则为 backgroundColor 属性返回字符串紫罗兰色，否则返回 mediumblue。

在设置内联样式时，我们还可以使用字符串插入表达式或变量。

const App = () => {
  const elementWidth = 150;

  return (
    <div>
      {/* 👇️ 设置内联样式将变量插入字符串 */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        迹忆客
      </div>
    </div>
  );
};

export default App;

在设置样式时，我们使用模板文字来连接字符串和变量。

div 元素的 width 属性设置为 150px。

美元符号和花括号语法允许我们使用被评估的占位符。

React 中常用的模式是提取具有预定义样式的包装器组件，这些样式呈现其子属性。

function BoldText({children}) {
  return <span style={{fontWeight: 'bold'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <p>
        Hello <BoldText>World</BoldText>
      </p>
    </div>
  );
};

export default App;

这是一个非常简单的例子，但是 BoldText 组件在元素上设置了一些样式并渲染了它的 children 属性。

这种方法通常用于定义具有通常重用样式的包装器组件。

在 React 中编写内联样式的另一种方法是将样式写入扩展名为 .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 (
    <div>
      <p className="bg-salmon text-white font-lg">hello world</p>
    </div>
  );
};

export default App;

在 React 中导入全局 CSS 文件时，最好将 CSS 文件导入 index.js 文件。

index.js 文件是你的 React 应用程序的入口点，所以它总是会被运行。

另一方面，如果我们将 CSS 文件导入组件，则在卸载组件后，CSS 样式可能会被删除。