集成css代码在js中

一、为什么会有 CSS-IN-JS

CSS-IN-JS 是 WEB 项⽬中将 CSS 代码捆绑在 JavaScript 代码中的解决⽅案.这种⽅案旨在解决 CSS 的局限性, 例如缺乏动态功能, 作⽤域和可移植性.

二、CSS-IN-JS 介绍

1、CSS-IN-JS ⽅案的优点：

1. 让 CSS 代码拥有独⽴的作⽤域, 阻⽌ CSS 代码泄露到组件外部, 防⽌样式冲突.
2. 让组件更具可移植性, 实现开箱即⽤, 轻松创建松耦合的应⽤程序
3. 让组件更具可重⽤性, 只需编写⼀次即可, 可以在任何地⽅运⾏. 不仅可以在同⼀应⽤程序中重⽤组件, ⽽且可以在使⽤相同框架构建的其他应⽤程序中重⽤组件.
4. 让样式具有动态功能, 可以将复杂的逻辑应⽤于样式规则, 如果要创建需要动态功能的复杂UI, 它是理想的解决⽅案.

2、CSS-IN-JS ⽅案的缺点：

1. 为项⽬增加了额外的复杂性.
2. ⾃动⽣成的选择器⼤⼤降低了代码的可读性

三、 Emotion 库

Emotion 是⼀个旨在使⽤ JavaScript 编写 CSS 样式的库.

1、css 属性⽀持

1. JSX Pragma

npm install @emotion/core @emotion/styled

通知 babel, 不再需要将 jsx 语法转换为 React.createElement ⽅法, ⽽是需要转换为 jsx ⽅法.

import React from 'react';
/** @jsx jsx */
import {jsx} from '@emotion/core'
function App() {return <div css={{width: 200, height: 200,background: red}}></div>
}

2. Babel Preset

1. npm run eject 弹射出底层配置
   
   添加git之后才能弹射

2. 在 package.json ⽂件中找到 babel 属性, 加⼊如下内容

接下来就可以去掉注释了

import React from 'react';
function App() {return <div css={{width: 200, height: 200,background: red}}></div>
}

四、css的使用方法

1. String Styles

2. Object Styles

五、css 属性优先级

props 对象中的 css 属性优先级⾼于组件内部的 css 属性. 在调⽤组件时可以在覆盖组件默认样式.

css.js

app.js

六、Styled Components 样式化组件

样式化组件就是⽤来构建⽤户界⾯的，是 emotion 库提供的另⼀种为元素添加样式的⽅式。

import react from 'react';
import styled from '@emotion/styled'const Button = styled.button`width: 100px; height: 30px; background: blue; 
`
const Container = styled.div({width: 1000,background: pink,margin: '0 auto',
})function App() {return <div><Container><Button>我是按钮</Button></Container></div>
}export default App;

七、根据 props 属性覆盖样式

方式一

import react from 'react';
import styled from '@emotion/styled'const Button = styled.button`width: 100px; height: 30px; background: ${props => props.bgColor || 'yellow'}; 
`
const Container = styled.div({width: props.w || 1000,background: pink,margin: '0 auto',
})function App() {return <div><Container w={1600}><Button bgColor="blue">我是按钮</Button></Container></div>
}export default App;

方式二

根据 props 属性覆盖样式

import react from 'react';
import styled from '@emotion/styled'const Button = styled.button`width: 100px; height: 30px; background: ${props => props.bgColor || 'yellow'}; 
`
const Container = styled.div({width: 1000,background: 'pink',margin: '0 auto',
}, props =>({width: props.width, background: props.bgColor
}));function App() {return <div><Container w={1600} bgColor="red"><Button>我是按钮</Button></Container></div>
}export default App;

八、为任何组件添加样式

Styled Components 样式化组件

方式一、字符串

import React from 'react'
import styled from '@emotion/styled'function Demo({className}) {return <div className={className}>Demo</div>
}const Fancy = styled(Demo)`color: red;
`function App() {return <div><Fancy /></div>
}export default App;

方式二、对象

import React from 'react'
import styled from '@emotion/styled'function Demo({className}) {return <div className={className}>Demo</div>
}const Fancy = styled(Demo)`color: red;
`
const Fancy2 = styled(Demo)({background: 'red',color: 'white'
})function App() {return <div><Fancy /><Fancy2 /></div>
}export default App;

十、为特定父级下的子组件添加样式

通过⽗组件设置⼦组件样式

方式一、字符串

import React from 'react'
import styled from '@emotion/styled'const Child = styled.div`color: red;
`
const Parent = styled.div`${Child} {color: green;}
`function App() {return <div><Child>child</Child><Parent><Child>child parent</Child></Parent></div>
}export default App;

方式二、对象

import React from 'react'
import styled from '@emotion/styled'const Child = styled.div({color: 'red'
})
const Parent = styled.div({[Child]: {color: 'yellow'}
})function App() {return <div><Child>child</Child><Parent><Child>child parent</Child></Parent></div>
}export default App;

十一、css选择器&

import React from 'react'
import styled from '@emotion/styled'const Container = styled.div`width: 200px;height: 200px;color: pink;background: skyblue;&:hover {background: pink;}& > span {color: yellow;}
`function App() {return <div><Container>container<span>span</span></Container></div>
}export default App;

十二、样式化组件as属性

要使⽤组件中的样式, 但要更改呈现的元素, 可以使⽤ as 属性

import React from 'react'
import styled from '@emotion/styled'const Button = styled.button`color: red;
`function App() {return <div><Button as="a" href="#">button</Button></div>
}export default App;

十三、样式组合

十四、Global组件

import React from 'react'
import styled from '@emotion/styled'
import { css, Global } from '@emotion/core'const styles = css`body {margin: 0;}a {text-decoration: none;color: red;}
`
function App() {return <div><Global styles={styles} /><a href ="#">我是a</a><Demo /></div>
}export default App;

十五、keyframes关键帧动画

import React from 'react'
import styled from '@emotion/styled'
import { css, keyframes } from '@emotion/core'const move = keyframes`0% {background: skyblue;left: 0;top: 0;}100% {background: tomato;left: 600px;top: 300px;}
`
const box = css`width: 100px;height: 100px;position: absolute;animation: ${move} 2s ease infinite alternate;
`function App() {return <div css={box}>app</div>
}export default App;

十六、创建主题

npm install emotion-theming

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from 'emotion-theming';const theme = {colors: {primary: 'tomato'}
};ReactDOM.render(<ThemeProvider theme={theme}><App /></ThemeProvider>,document.getElementById('root')
);

App.js

import React from 'react';
import { css } from '@emotion/core';
import { useTheme } from 'emotion-theming';const primaryColor = props => css`color: ${props.colors.primary}
`function App() {console.log(useTheme());return <div css={primaryColor}>App works</div>;
}export default App;