在 React.js 中设置内联样式

作者

在 React.js 中设置内联样式

Setting inline Styles in React.js

在 React 中设置内联样式：

  1. 将style元素上的 prop 设置为一个对象。
  2. 设置特定的 CSS 属性和值来设置元素的样式。
  3. 例如，<div style={{backgroundColor: 'salmon', color: 'white'}}>。
应用程序.js
const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  const elementWidth = 150;

  return (
    <div>
      {/* 👇️ set inline styles directly */}
      <div style={{backgroundColor: 'salmon', color: 'white'}}>
        Some content
      </div>

      <br />

      {/* 👇️ set inline styles using an object variable */}
      <div style={stylesObj}>Some content</div>

      <br />

      {/* 👇️ set inline styles conditionally using a ternary */}
      <div
        style={{
          backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
          color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
        }}
      >
        Some content
      </div>

      <br />

      {/* 👇️ set inline styles interpolating a variable into a string */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Some content
      </div>
    </div>
  );
};

export default App;

反应设置内联样式

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

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

应用程序.js
<div style={{backgroundColor: 'salmon', color: 'white'}}>
  Some content
</div>

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

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

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

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

应用程序.js
const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  return (
    <div>
      {/* 👇️ set inline styles using an object variable */}
      <div style={stylesObj}>Some content</div>
    </div>
  );
};

export default App;

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

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

应用程序.js
<div
  style={{
    backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
    color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
  }}
>
  Some content
</div>

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

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

示例中的三元运算符检查length字符串hi的 是否等于2，如果等于，则返回属性的字符串violet，
backgroundColor否则返回mediumblue。

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

应用程序.js
const App = () => {
  const elementWidth = 150;

  return (
    <div>
      {/* 👇️ set inline styles interpolating a variable into a string */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Some content
      </div>
    </div>
  );
};

export default App;

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

元素的width属性设置为。div150px

请注意，字符串包含在反引号 “ 中，而不是单引号中。

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

React 中一个常用的模式是提取具有预定义样式的包装器组件，以呈现其childrenprop。

应用程序.js
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组件在元素上设置了一些样式并渲染了它的childrenprop。

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

在 React 中编写内联样式的另一种方法是将样式写入带有.css扩展名的文件中。

应用程序.css
.bg-salmon {
  background-color: salmon;
}

.text-white {
  color: white;
}

.font-lg {
  font-size: 2rem;
  padding: 10px 10px;
}

下面是我们将如何导入和使用这些类。

应用程序.js
// 👇️ 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;

使用 css 文件的样式

在 React 中导入全局 CSS 文件时，最佳做法是将 CSS 文件导入到您的index.js文件中。

该index.js文件是您的 React 应用程序的入口点，因此它始终会运行。

另一方面，如果您将 CSS 文件导入到组件中，则一旦您的组件卸载，CSS 样式可能会被删除。

–

发表评论