styled-components

介绍：styled-components

它有几个特点：使用模板字符串标签+样式组合后是一个大写字母开头表示的组件，比如可以说是将react开发中最流行的一些写法整合起来，对于React开发者来说，是非常好入手的。那么，在react组件中，使用外部css还是组件css，不同的开发者习惯不同。支持外部css的人，认为：组件是jsx，应该和css分离，保证组件的纯净外部css也可以有很好的管理方式命名空间的问题只要制定规范化的样式命名管理，就可以避免可以提取可复用的样式进行管理

安装

# with npm

npm install --save styled-components

# with yarn

yarn add styled-components

应用

新建style.ts

import styled from 'styled-components';

// 外部盒子
export const OutsideBox = styled.div`
  padding: 20px 10px 0 20px;
`;

 新建 index.tsx——引入style.ts

import React from 'react';
import { Card, Toast, Button, NavBar } from 'antd-mobile';
import { OutsideBox } from '@/components/style';
import styles from './style.less';

export default () => {
  return (
    <>
      <NavBar back={null}>
        <div>我的申请</div>
      </NavBar>
      <OutsideBox>1</OutsideBox>
    </>
  );
};

 使用前 ：                                                           使用后：

 组件化标签统一修改控制