react | styled-component | css-in-js | Ant Design

styled-component官网：styled-components.com/docs

安装

npm install styled-components

下载对应插件（方便开发）：

vscode-styled-components：marketplace.visualstudio.com/items?itemN…

React Extension Pack：marketplace.visualstudio.com/items?itemN…

使用

style.js文件

import React from 'react';
import styled from 'styled-components';


export const Adaptation = styled.div`
  min-width: 50px;
  padding: 10px;
  font-size: 13px;
  background-color: ${(props) => props.backgroundColor};
  color: ${(props) => props.color};
  text-align: center;
  border-radius: 4px;
  margin: 3% 3% 1% 0;
`;

index.js文件

import styled from 'styled-components';
import { Adaptation } from './style';

export default function Projects() {
  // 从redux存储桶里获取数据
  const listData = useSelector((state) => state.listProject.listData);

  return (
     <Adaptation />
   ）
}

styled-component传参

<Adaptation
    key={i.id}
    backgroundColor={i.color.bg}
    color={i.color.text}
>
    {i.name}
</Adaptation>

css-in-js官网：ant-design.antgroup.com/docs/blog/c…

Ant Design官网：ant-design.antgroup.com/index-cn

安装

npm install antd --save

使用

import { Avatar } from 'antd';

export default function Projects() {
    return(
           <Avatar.Group style={{ marginLeft: 'auto' }}>
              <Avatar src={userIcon} />
              <Avatar src={userIcon} />
              <Avatar src={userIcon} />
           </Avatar.Group>
    )
}