React教程（九）：StyledComponent
官⽹地址：
使⽤Styled Component的⼏⼤理由
1）Scoped Style(范围限定的样式)
不⽤担⼼引⽤的css⽂件被其他⼈修改
2）CSS in JS
可以在JS中使⽤component内部变量做条件判断
const Button = styled.button`
/* Adapt the colors based on primary prop */
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
`;
<Button primary>Normal</Button>
3）可移植性
没有了css，所有样式都在组件内部，⽅便移植到其他平台，如React Native。
4）没有了样式命名的冲突
没有class name的冲突，适⽤于微前端架构。因为微前端的⼀⼤问题就是不⽤sub app之间可能定义了相同名称的样式。⽽style component的class name是通过hash算法得出的，不会冲突。
5）便于对样式做unit test
通过style-components团队提供的组件
npm install --dev jest-styled-components
我们可以进⾏如下的单元测试
import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'
const Button = styled.button`
color: red;
`
test('it works', () => {
const tree = ate(<Button />).toJSON()
expect(tree).toMatchSnapshot()
})
⼀句话总结：CSS-IN-JS
代码⽰例:
常⽤API
1: styled - 基础API，⽣成组件
2: attrs - 为组件添加属性(Props)
const Input = styled.input.attrs(props => ({
// we can define static props
type: "text",
// or we can define dynamic ones
size: props.size || "1em",
}))`
3: as - 转变组件类型，⽐如将⼀个div转变为button
react native
const Component = styled.div`
color: red;
`;
render(
<Component
as="button"
onClick={() => alert('It works!')}
>
Hello World!
</Component>
)
4: css - 避免创建新的组件，直接应⽤样式。需要修改babel。
<div
css={`
background: papayawhip;
color: ${props => };
`}
/>
<Button
css="padding: 0.5em 1em;"
/>
参考：
5: TypeScript兼容
To prevent TypeScript errors on the css prop on arbitrary elements, install @types/styled-components and add the following import once in your project:
import {} from 'styled-components/cssprop'
6: createGlobalStyle - 创建并应⽤全局样式
7: ThemeProvider
8: keyFrames - 创建动画
import styled, { keyframes } from 'styled-components'
const fadeIn = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
const FadeInButton = styled.button`
animation: 1s ${fadeIn} ease-out;
问题及答复
1）有同事问，Styled-Component的CSS都分散在各个组件中，不能像传统CSS⽂件那样有个总的样式，岂不是很⿇烦？
答复：styled-components提供了createGlobalStyle⽅法，可以创建global样式。代码⽰例如下：
新建src/styles/global.js
import { createGlobalStyle } from "styled-components";
import px2vw from "../utils/px2vw";
export const Global = createGlobalStyle`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
font-size: ${px2vw(24)};
@media (min-width: 768px) {
font-size: ${px2vw(18)};
}
@media (min-width: 1024px) {
font-size: ${px2vw(16)};
}
}
`;
export default Global;
在App.js中引⽤该Global样式
import Global from "./styles/global";
function App() {
return (
<>
<Global />
<Home />
</>
);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。