简书开发笔记

学习了react框架的一些东西,现在继续学习如何从零开发部分简书网站界面.本文不是总结,而是开发笔记.

关于css

使用插件管理全局css样式.

styled-components

首先,官方文档在此,遇到问题,优先查询官方文档.
此后,将css文件扩展名改为js,也就是说用js文件去描述css.举例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import styled ,{ createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
margin: 0px 20px;
background-color: grey;
}
.demo {
background-color: green;
font-size: 12px;
}
`

export const Button = styled.button`
/* Adapt the colors based on primary prop */
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};

font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;

export default GlobalStyle

从此,css文件不复存在,直接变成了组件内容.被js写入了组件里.