React项目简易统一样式

 我们的项目组很小，团队也没有专门的美工，前端程序员即是美工也是码农。以前用过CSS、LESS，感觉都不适合我们，到了后期根本没有办法维护，入侵太强阅读性太差。

用来用去还是喜欢原始的 （ style?: CSSProperties ）。

 

所以我希望有一个简单易用 + 强类型的样式规范，可以做到颜色换肤、统一修改字体大小，边距就可以了。最终实现一个文件定义样式基本变量，其它组件依据规范自己的维护自己样式，

意思就是组件自己的数据、行为逻辑、展示逻辑自己管，非常的OOP。

 

 

import * as React from "react";

const fontSize标准 = 14;
class MeStyleClass {
  fontSize标准 = fontSize标准;

  // 固定白色不能变
  c配色背景默认: React.CSSProperties = {
    backgroundColor: "#fff",
    color: "#000"
  };

  c配色背景强: React.CSSProperties = { backgroundColor: "#fd5", color: "#000" };

  c配色醒目: React.CSSProperties = { backgroundColor: "#49f", color: "#fff" };
  // c配色醒目2: React.CSSProperties = { backgroundColor: "#396", color: "#fff" };

  c配色危险: React.CSSProperties = { backgroundColor: "#c30", color: "#fff" };

  t大标题: React.CSSProperties = {
    fontSize: fontSize标准 * 2,
    marginBottom: fontSize标准 * 2
  };
  t小标题: React.CSSProperties = {
    fontSize: fontSize标准 * 1.5,
    marginBottom: fontSize标准 * 1.5
  };
  t正文大号: React.CSSProperties = {
    fontSize: fontSize标准 * 1.2,
    marginBottom: fontSize标准 * 1.2
  };
  t正文: React.CSSProperties = {
    fontSize: fontSize标准,
    marginBottom: fontSize标准
  };
  t正文小号: React.CSSProperties = {
    fontSize: fontSize标准 * 0.9,
    marginBottom: fontSize标准 * 0.9
  };
}

export const MeStyle = new MeStyleClass();

 

使用如下：

   <div  style={{ ...MeStyle.c配色背景默认,  ... MeStyle.t大标题 }}>
     .....
   </div>

　如果是是边距padding之类的，可以用

padding: MeStyle.fontSize标准 * 0.5 这样的系数。

结论： 在小项目，简单就是美