chakra ui主题定义方法chakra ui主题定义方法 1、自定义主题中不能使用钩子函数和localStore 2

chakra ui主题定义方法

1、自定义主题中不能使用钩子函数和localStore

在主题文件中不能使用hooks函数和localStore，使用localStore可能会为空，但是热模块更新时会有数据存在

2、如何切换颜色样式

2.1 定义colors，key只能用数字

/* 正确的做法 */
blue: {
    100: "rgba(101, 237, 255, 0.1)",
}

/* 错误的做法 */
blue: {
    test: "rgba(101, 237, 255, 0.1)",
}

2.2 自定义颜色名，并且有两种模式

const semanticTokens = {
  colors: {
    error  : "red.500",
    success: "green.500",
    primary: {
      default: "red.500",
      _dark  : "red.400"
    },
    secondary: {
      default: "red.800",
      _dark  : "red.700"
    }
  }
};

==注意：自定义semanticTokens只能在chakra ui的标签中使用==

3、组件的样式切换（可以使用两种模式），在variants中可以使用函数接收参数

export default {
  variants: {
    test1: (props:any) => {
      return {
        bg   : props?.colorMode === "dark" ? "#FF3737" : "red",
        color: "rgba(40, 40, 40, 1)"
      };
    },
    test2: (props:any) => {
      return {
        bg   : props?.colorMode === "dark" ? "rgba(101, 237, 255, 0.1)" : "rgba(101, 237, 255, 1)",
        color: "rgba(101, 237, 255, 1)"
      };
    }
  }
};

4、定义class，在全局样式中定义（需要加点，然后会被加载到head中的style标签中）

".test": {
        bg   : "red",
        color: "blue"
 }