Question

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

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

在React世界中找到一个好的跳跃点来解决上述问题很有挑战性，所以我喜欢一些建议，指出我正确的方向。

对于上面列出的所有4个项目，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而不是在标题中使用<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之类的模块捆绑器来处理这些import语句。从这里开始阅读：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
   }
}

一旦您的应用增长，您可能想要尝试其他解决方案，例如风格的部件。

了解如何在React中处理样式

1 个答案: