React css-in-js emotion

React css-in-js emotion

CSS-in-JS不是指某个具体的库，是指组织CSS代码的一种凡是，代表库有styled-component和emotion

emotion的安装及使用

yarn add @emotion/react @emotion/styled

使用

以下演示代码处于同于文件中

1. 引入

   import styled from '@emotion/styled'
   

2. 编写样式

   写法模板

   style.H5自带的标签`
   	...样式
   `
   

   const Container = styled.div`
       display: flex;
       flex-direction: column;
       align-items: center;
       min-height: 100vh;
   `
   

   普通的写法是没有语法高亮和语法提示的，为了便捷开发，可以下载对应的插件

   • VsCode安装 vscode-styled-components
   • WebStrom安装 styled-components

3. 替换

   原代码

   export function UnauthenticatedApp() {
       const [isRegister,setIsRegister] = useState(false)
       return (
           <div style={{display:'flex',justifyContent:'center'}}>
               <Card>
                   {isRegister ? <RegisterSrceen/> : <LoginSrceen/>}
                   <button onClick={() => setIsRegister(!isRegister)}>切换到{isRegister ? '登录' : '注册'}</button>
               </Card>
               
           </div>
       )
   }
   

   替换后的代码

   export function UnauthenticatedApp() {
       const [isRegister,setIsRegister] = useState(false)
       return (
           <Container>
               <Card>
                   {isRegister ? <RegisterSrceen/> : <LoginSrceen/>}
                   <button onClick={() => setIsRegister(!isRegister)}>切换到{isRegister ? '登录' : '注册'}</button>
               </Card>
               
           </Container>
       )
   }
   

组件样式的修改

组件样式和普通标签样式的修改是不一样的

<Card>
    {isRegister ? <RegisterSrceen/> : <LoginSrceen/>}
    <button onClick={() => setIsRegister(!isRegister)}>切换到{isRegister ? '登录' : '注册'}</button>
</Card>

<Card></Card>使用的是antd中的组件

编写样式

const ShadowCard = styled(Card)`
    width: 40rem;
    min-height: 56rem;
    padding: 3.2rem 4rem;
    border-radius: 0.3rem;
    box-sizing: border-box;
    box-shadow: rgba(0,0,0,0.1) 0 0 10px;
    text-align: center;
`

替换

<ShadowCard>
    {isRegister ? <RegisterSrceen/> : <LoginSrceen/>}
    <button onClick={() => setIsRegister(!isRegister)}>切换到{isRegister ? '登录' : '注册'}</button>
</ShadowCard>