1

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

  1. 添加重置 CSS
  2. 实施网格系统
  3. 为(按钮、标题)等项目实现通用样式
  4. 为每个组件实现特定样式

在 React 世界中,要找到一个很好的起点来解决上述问题是一项挑战,所以我希望有人能给我指出正确的方向。

对于上面列出的所有 4 个项目,样式化组件是目前 React 世界中最流行的事情吗?如果没有,你有什么建议我开始学习处理上面提到的项目。

4

1 回答 1

3

如果您从 React 开始,我不会在styled-components没有首先了解问题styled-components正在尝试解决的情况下进行深入研究。

<link>您的第一种方法应该与在文件中添加一个或多个 s一样基本.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这样的模块捆绑器来处理这些imports 语句。从这里开始阅读:https ://webpack.js.org/guides/asset-management/#loading-css 。这样做您将不需要手动将 CSS 文件放入<head>.

实际上,您将能够从组件中导入 CSS:

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

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

一旦您的应用程序增长,您可能想要尝试其他解决方案,例如样式组件。

于 2017-06-14T15:59:33.977 回答