如果您从 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这样的模块捆绑器来处理这些import
s 语句。从这里开始阅读: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
}
}
一旦您的应用程序增长,您可能想要尝试其他解决方案,例如样式组件。