©2020-2024 ioDraw All rights reserved
集成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;