集成css代码在js中
一、为什么会有 CSS-IN-JS
CSS-IN-JS 是 WEB 项⽬中将 CSS 代码捆绑在 JavaScript 代码中的解决⽅案.这种⽅案旨在解决 CSS 的局限性, 例如缺乏动态功能, 作⽤域和可移植性.
二、CSS-IN-JS 介绍
1、CSS-IN-JS ⽅案的优点:
- 让 CSS 代码拥有独⽴的作⽤域, 阻⽌ CSS 代码泄露到组件外部, 防⽌样式冲突.
- 让组件更具可移植性, 实现开箱即⽤, 轻松创建松耦合的应⽤程序
- 让组件更具可重⽤性, 只需编写⼀次即可, 可以在任何地⽅运⾏. 不仅可以在同⼀应⽤程序中重⽤组件, ⽽且可以在使⽤相同框架构建的其他应⽤程序中重⽤组件.
- 让样式具有动态功能, 可以将复杂的逻辑应⽤于样式规则, 如果要创建需要动态功能的复杂UI, 它是理想的解决⽅案.
2、CSS-IN-JS ⽅案的缺点:
- 为项⽬增加了额外的复杂性.
- ⾃动⽣成的选择器⼤⼤降低了代码的可读性
三、 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
-
npm run eject
弹射出底层配置
添加git之后才能弹射 -
在 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;