styled-components浅入浅出

发表于 | 分类于 | | 阅读次数:
styled-components以组件的形式来声明样式，让样式也成为组件，从而分离逻辑组件与展示组件。

styled-components

styled-components以组件的形式来声明样式，让样式也成为组件，从而分离逻辑组件与展示组件。

部分实践

1. 引入全部样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {createGlobalStyle} from 'styled-components'

export const Global = createGlobalStyle`
  body{
    background-color:red!important;
  }
 	h1, h2, h3 {
    font-family: '${props => props.theme.fontFamily.common}';
    font-weight: normal;
    font-style: normal;
  }
`

<div className="App">
  	<Global></Global>
</div>

2. input attr

为Styled-Component添加默认属性和默认样式值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "password",

  // or we can define dynamic ones
  size: props.size || "1em",
}))`
  color: red;
`;

render(
  <div>
    <Input />
  </div>
);

3. 主题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const theme = {
	fontSizes: {
		sm: '10px',
		md: '15px',
		lg: '25px'
	}
}

const BodyTexts = styled.p`
	font-size: ${props => props.theme.fontSizes.sm}
`

render(
  <div>
    <ThemeProvider theme={theme}>
      <BodyTexts>Themed</BodyTexts>
    </ThemeProvider>
  </div>
);

4. 继承

1
2
3
4
let StyledCompoent2 = styled(StyledCompoent1)`
    background:xxx
    ...
`

StyledComponent2其实是一个全新的class

如果我们想要做到真正的继承，需要使用style-components提供的extend方法，它是StyleComponent下的一个属性方法。

1
2
3
4
let StyledCompoent2 = StyledCompoent1.extend`
    background:xxx
    ...
`

5. withComponent

创建新StyledComponent的方法，该新StyledComponent会应用不同的标签或组件，但所调用的规则相同。

1
2
3
4
5
6
7
8
9
10
11
12
const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)

6. Refs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
`;
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  render() {
    return (
      <Input
        ref={this.inputRef}
        placeholder="Hover to focus!"
        onMouseEnter={() => {
          this.inputRef.current.focus()
        }}
      />
    );
  }
}
render(
  <Form />
);

7. 获取Theme

1
2
3
4
5
6
7
8
9
import { withTheme } from 'styled-components'

class MyComponent extends React.Component {
  render() {
    console.log('Current theme: ', this.props.theme);
    // ...
  }
}
export default withTheme(MyComponent)

插件

Stylelint

1
2
3
4
5
(npm install --save-dev \
  stylelint \
  stylelint-processor-styled-components \
  stylelint-config-styled-components \
  stylelint-config-recommended)

Styled Theming

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import theme from 'styled-theming'

const boxBackgroundColor = theme('mode', {
  light: '#fff',
  dark: '#000',
})

const Box = styled.div`
  background-color: ${boxBackgroundColor};
`

export default function App() {
  return (
    <ThemeProvider theme={{ mode: 'light' }}>
      <Box>Hello World</Box>
    </ThemeProvider>
  )
}

vscode-styled-components

typescript-plugin-styled-components

总结

优点：

  1. 活跃的社区。
  2. CSS的模板文字语法。这意味着，如果您可以编写普通的CSS，就可以为组件设置样式，而不必学习新的语法。
  3. Sass支持。
  4. 自动提供前缀
  5. 组件更加独立清晰，语义化更清晰，维护简单，第二个人接手很快，也不用顾忌之前的样式冲突。
  6. 减轻了大家类名命名的负担。
  7. 可实现仅加载所需的最少代码。
  8. 兼容性良好 v4.x（React v16.3 +：IE11，IE 9+（带有Map + Set polyfills）

缺点：

  1. 使用vscode-styled-components 有提示，但提示速度较慢，没有scss、css提示友好，比如margin-left，我在scss中只需要ml回车就行了，在styled-components组件中就还是得打全。
  2. 产品改样式，想要从HTML中定位确切的知道代码中某个 class 在哪儿用到很难

so:

优点>缺点，go on 用起来吧！

感谢你的打赏哦！