glamorous是一个轻量级的 CSS-in-JS 库,具有类似于 styled-components'的简单 API,并且在帽子下使用 glamor 的功能。
让我们来谈谈如何使用迷人的,给我们的组件一些风格。
安装
要开始,你需要几个包:迷人的,迷人的和促销类型:
1$ npm install glamorous glamor prop-types
2
3# or, using Yarn
4$ yarn add glamorous glamor prop-types
然后,要开始使用它,您只需要从库导入默认导出:
1[label SomeComponent.js]
2import glamorous from 'glamorous';
3
4// ...
基本使用
您创建了一个迷人的组件,并使用任何DOM元素的名称给它一些风格,并提供一个对象的字面名称与CSS属性名称( Camel-cased)和值:
1import React from 'react';
2import glamorous from 'glamorous';
3
4const Box = glamorous.div({
5 background: 'pink',
6 marginTop: 30, // defaults to pixels
7 padding: '2rem 3rem'
8});
9
10const MyComponent = () => {
11 return (
12 <Box>
13 <h1>A title inside a pink box! 🌸</h1>
14 </Box>
15 );
16};
17
18export default MyComponent;
普罗普
您可以使用回调函数作为创建组件时的第二个参数访问传入到迷人的组件的代理:
1import React from 'react';
2import glamorous from 'glamorous';
3
4const Box = glamorous.div(
5 {
6 marginTop: 30, // defaults to pixels
7 padding: '2rem 3rem'
8 },
9 props => ({
10 background: props.bg
11 })
12);
13
14const MyComponent = () => {
15 return (
16 <Box bg="purple">
17 <h1>A title inside a purple box! 🌸</h1>
18 </Box>
19 );
20};
21
22export default MyComponent;
媒体查询,伪元素和伪类
使用迷人的媒体查询实际上很容易:
1// ...
2
3const Box = glamorous.div({
4 maxWidth: '60%',
5 background: 'antiquewhite',
6 margin: '1rem auto',
7 padding: '2rem 3rem',
8 ['@media (max-width: 600px)']: {
9 maxWidth: '90%',
10 background: 'lightseagreen'
11 }
12});
13
14// ...
对于 伪元素和 假类类也同样如此:
1// ...
2
3const Box = glamorous.div({
4 maxWidth: '60%',
5 background: 'antiquewhite',
6 margin: '1rem auto',
7 padding: '2rem 3rem',
8 transition: 'background .3s',
9 [':hover']: {
10 background: 'lightseagreen'
11 },
12 [':before']: {
13 content: '"Hello"',
14 background: 'pink',
15 padding: '.5rem 1rem'
16 }
17});
18
19// ...
<$>[注] 注意为 :before 伪元素使用单个引文中的双引文,这个语法对于伪元素的正确工作至关重要。
替代使用
对于更简单和更小的组件,您还可以使用替代的API,在那里您可以导入与特定DOM元素相符的组件,并直接使用它们。
1import React from 'react';
2import { Div, H1 } from 'glamorous';
3
4const MyComponent = () => {
5 return (
6 <Div background="antiquewhite" margin="1rem auto" maxWidth="60%">
7 <H1 className="card-title" borderBottom="2px solid purple">
8 A title inside an antique white box! 🌸
9 </H1>
10 </Div>
11 );
12};
glamorous 足够聪明来区分原始元素属性和风格特性. 使用上面的示例,卡头类将被添加到元素中,作为一个额外的类,而不是由 glamorous 生成的边界底部风格。
主题
您可以使用迷人的主题提供者组件提供主题信息,这些信息将可用于树下所有组件。
例如,以下是如何从应用组件中提供主题:
1[label App.js]
2import React, { Component } from 'react';
3import { ThemeProvider } from 'glamorous';
4
5import Card from './Card';
6
7const theme = {
8 default: {
9 background: '#f3f3f3',
10 color: '#525252'
11 },
12 dark: {
13 background: '#231919',
14 color: '#FFDABC'
15 }
16};
17
18class App extends Component {
19 state = {
20 currentTheme: 'default'
21 };
22
23 handleClick = () => {
24 this.setState(state => ({
25 currentTheme: state.currentTheme === 'default' ? 'dark' : 'default'
26 }));
27 };
28
29 render() {
30 const currentTheme = this.state.currentTheme;
31
32 return (
33 <ThemeProvider theme={theme[currentTheme]}>
34 <React.Fragment>
35 <Card />
36 <Card />
37 <button onClick={this.handleClick}>Toggle theme</button>
38 </React.Fragment>
39 </ThemeProvider>
40 );
41 }
42}
43
44export default App;
按钮的 onClick 处理器在我们的两个主题之间切换,主题提供商的儿童组件将自动访问主题数据。
您可以在创建一个迷人的组件时访问主题,从传入到调用:
1[label Card.js]
2import React from 'react';
3import glamorous from 'glamorous';
4
5const Box = glamorous.div(
6 {
7 maxWidth: '60%',
8 margin: '1rem auto',
9 padding: '2rem 3rem'
10 },
11 ({ theme }) => ({
12 background: theme.background,
13 color: theme.color
14 })
15);
16
17const MyComponent = () => {
18 return (
19 <Box>
20 <h1>A title inside a pink box! 🌸</h1>
21 </Box>
22 );
23};
24
25export default MyComponent;
全球风格
glamorous 不会打扰全球风格,而您可以返回 glamor 的 css.global,将一些全球风格注入您的应用程序:
1[label App.js]
2// ...other imports
3import { css } from 'glamor';
4
5css.global('html, body', {
6 background: '#f3f3f3',
7 margin: 0
8});
9
10// ...
这就是我们对迷人的简短介绍吧. 请参阅 官方文件 对于更先进的使用案例。