迹忆客 专注技术分享

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

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

  return (
    <div>
      <h2 className="my-h2">Hello 迹忆客(jiyik.com)</h2>

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

export default App;

样式标签中花括号之间的表达式将被评估并添加样式。

也可以直接在样式标签中内联 css。

const App = () => {

  return (
    <div>
      <h2 className="my-h2">Hello 迹忆客(jiyik.com)</h2>

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

export default App;

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

注意 ，我们使用 style 标签添加的样式不在 App 组件的范围内。

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

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

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

App.css

.my-h2 {
  padding: 25px;
  background-color: salmon;
  color: white;
}

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

import './App.css';

const App = () => {
  return (
    <div>
      <h2 className="my-h2">Hello 迹忆客(jiyik.com)</h2>
    </div>
  );
};

export default App;

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