在 React 组件中插入样式标签

作者

在 React 组件中插入样式标签

Insert a style tag in a React component

要在 React 组件中插入样式标签，请将您的 css 包装在样式标签中的模板字符串中。大括号之间的表达式将被评估，样式将被添加。

应用程序.js
const App = () => {
  const styles = `
    .my-h2 {
      padding: 25px;
      background-color: salmon;
      color: white;
    }
  `;

  return (
    <div>
      <h2 className="my-h2">Hello world</h2>

      <style>{styles}</style>
    </div>
  );
};

export default App;

标记中花括号之间的表达式style将被评估，样式将被添加。

反应插入样式标签

您也可以直接在style标签中内联 css。

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

  return (
    <div>
      <h2 className="my-h2">Hello world</h2>

      <style>{`
        .my-h2 {
          padding: 25px;
          background-color: salmon;
          color: white;
        }
    `}</style>
    </div>
  );
};

export default App;

上面的代码片段实现了相同的结果。

请注意，我们使用style标签添加的样式不限于App组件。

my-h2只要App组件被渲染，另一个组件就可以使用该类。

另一种方法是使用具有.css扩展名的文件并写入和导入您的全局css文件。

下面是我们如何将我们的 css 移动到一个名为App.css.

应用程序.css
.my-h2 {
  padding: 25px;
  background-color: salmon;
  color: white;
}

下面是我们如何将css文件导入我们的App.js文件。

应用程序.js
import './App.css';

const App = () => {
  return (
    <div>
      <h2 className="my-h2">Hello world</h2>
    </div>
  );
};

export default App;

这是编写和应用 css 到 React 组件的更常用的方法。

–

发表评论