styled-component theme helper

export enum Primary {
  contrastText = "contrastText",
  dark = "dark",
  light = "light",
  main = "main",
}

export const PrimaryColors = (color: Primary) => (props: any) =>
  props.theme.palette.primary[color];

export enum Background {
  default = "default",
  paper = "paper",
}

export const BackgroundColors = (color: Background) => (props: any) =>
  props.theme.palette.background[color];

export enum Action {
  active = "active",
  disabled = "disabled",
  disabledBackground = "disabledBackground",
  focus = "focus",
  hover = "hover",
  selected = "selected",
}

export const ActionColors = (
  color:
    | "active"
    | "disabled"
    | "disabledBackground"
    | "focus"
    | "hover"
    | "selected"
) => (props: any) => props.theme.palette.action[color];

export enum Text {
  disabled = "disabled",
  hint = "hint",
  icon = "icon",
  primary = "primary",
  secondary = "secondary",
}
export const TextColors = (
  color: "disabled" | "hint" | "icon" | "primary" | "secondary"
) => (props: any) => props.theme.palette.text[color];

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容