CSS-IN-JS

集成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;