迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

在 React.js 中设置内联样式

作者:迹忆客 最近更新:2022/05/04 浏览次数:

在 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 设置内联样式

代码示例展示了在 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文件

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

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

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

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便