了解如何在 React 中处理样式

Question

我是一个学习 React 的新手。作为我学习的下一阶段，我需要学习如何设计 React 的样式。根据以前的经验，我需要采取以下步骤来设置我的 React 应用程序的样式：

添加重置CSS
实施网格系统
为（按钮，headers）
为每个组件实施特定样式

在 React 世界中，要找到一个好的起点来解决上述问题是一项挑战，所以我希望得到一些建议来指引我正确的方向。

对于上面列出的所有 4 项，styled-components 是目前 React 世界中最受欢迎的事情吗？如果没有，你有什么建议我开始学习处理上面提到的项目。

Answer 1

如果你是从 React 开始的，我不会在没有首先理解 styled-components 试图解决的问题的情况下进行像 styled-components 这样的深入研究。

您的第一种方法应该是基本的，只需将一个或多个 <link> 添加到您的 .css 文件（例如 reset.css、grid.css、其中的组件选择器等）并在组件中使用适当的 classNames 道具：

// main.css
body {
  // ...
}

// MyToolbar.css
.MyToolbar {
  // style for a MyToolbar react component
}

在你的 html:

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="reset.css">
       <link rel="stylesheet" type="text/css" href="main.css">
       <link rel="stylesheet" type="text/css" href="grid.css">
       <link rel="stylesheet" type="text/css" href="MyToolbar.css">

随着您的应用程序的增长，您会发现很难维护这个 <head>，因此您将受益于更加模块化的方法。

例如，您的下一步可能是从 javascript 导入 CSS，而不是在 header 中使用 <link>：

// App Component
import React from 'react';

// import globally used styles
import './styles/reset.css';
import './styles/main.css';

export default class App extends React.Component {
// snip
}

要在 JavaScript 中导入 CSS 个文件，您需要使用像 webpack to handle those imports statements. Start reading here: https://webpack.js.org/guides/asset-management/#loading-css 这样的模块打包器。这样一来，您就不需要手动 <head> 中的 CSS 文件了。

事实上，您可以从组件中导入 CSS：

// MyToolbar.js component
import React from 'react';
import './styles/MyToolbar.css';

export default class MyToolbar extends React.Component {
   render() {
      // render your component here
   }
}

一旦您的应用增长，您可能想尝试其他解决方案，例如styled-components.

了解如何在 React 中处理样式

Understanding how to approach styling in React

reactjs

styled-components