如何在 React.js 中设置内联样式

在 React 中设置内联样式:

  • 将元素上的样式属性设置为对象。
  • 设置特定的 CSS 属性和值来设置元素的样式。
  • 例如,
const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  const elementWidth = 150;

  return (
    
      {/* ️ 直接设置内联样式 */}
      
        迹忆客
      

      
{/* ️ 使用对象变量设置内联样式 */} 迹忆客
{/* ️ 使用三元有条件地设置内联样式 */} 迹忆客
{/* ️ 设置内联样式将变量插入字符串 */} 迹忆客 ); }; export default App;

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

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


  迹忆客

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

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

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

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

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

  return (
    
      {/* ️ 使用对象变量设置内联样式 */}
      迹忆客
    
  );
};

export default App;

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

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


  迹忆客

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

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

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

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

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

  return (
    
      {/* ️ 设置内联样式将变量插入字符串 */}
      
        迹忆客
      
    
  );
};

export default App;

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

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

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

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

function BoldText({children}) {
  return {children};
}

const App = () => {
  return (
    
      

Hello World

); }; 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 (
    
      

hello world

); }; export default App;

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

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

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

发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章