使用 CSS 模块的 Typescript 道具和主题

Question

我正在使用 CSS 模块创建一个带有 typescript 的 React 组件库，以使项目变得简单，但在主题化方面我正在努力使用 typescript 接口。我想为用户提供我的组件的多个变体，只需根据他的需要更改属性。

没有 CSS 模块，例如仅使用 SCSS，我可以在添加道具 className = ${styles.theme} 时使其工作，但是当我更改为模块时，它停止工作，它不会再从 Button 重新定位界面属性。

像这样 (Button.tsx):


import styles from "./Button.module.scss";
export interface ButtonProps {
  /**
   * Set this to change button theme properties
   * @default primary
   */
  theme:| "primary"
    | "info"
    | "success"
    | "warning"
    | "danger"
    | "disabled"
    | "primary-outline"
    | "info-outline"
    | "success-outline"
    | "warning-outline"
    | "danger-outline"
    | "primary-flat";
    onClick?: () => void;
}

export const Button: FunctionComponent<ButtonProps> = ({ 
  children, 
  onClick, 
  theme, 
  ...rest 
}) => (
  <div>
    <button 
      className={`${styles.$theme}`} 
      onClick={onClick} 
      {...rest}
    >
      {children}
    </button>
  </div>
)

和CSS模块文件（Button.module.scss）：

button {
  position: relative;
  height: 1.75rem;
  padding: 0.05rem .75rem;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  font-size: 1rem;
  text-align: center;

  cursor: pointer;
  user-select: none;

  border: none;
  border-radius: 4px;
  border-width: 1px solid;
  box-sizing: border-box;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  -o-transition: background 0.2s ease;
  transition: color 200ms ease-in 0s, border-color 200ms ease-in 0s, background-color 200ms ease-in 0s, filter 200ms ease-in 0s;
}

.primary {
  background-color: $snow-04;
  border-color: $snow-04;
  color: $polar-night-04;
  &:hover {
    filter: brightness(90%);
  }
}

.info {
  background-color: $frost-02;
  color: $polar-night-01;
  &:hover {
    filter: brightness(90%);
  }
}

如何才能从按钮界面访问主题道具和其他道具？我怎样才能在我的组件上语法化 className 来做到这一点？

非常感谢！

Answer 1

样式毕竟是一个对象...您可以像这样访问属性主题：

<button className={styles[theme]} onClick={onClick} {...rest}>
  {children}
</button>

我刚在这里试过：https://codesandbox.io/s/typed-css-modules-8itfp?file=/src/App.tsx

使用 CSS 模块的 Typescript 道具和主题

Typescript props and theming with CSS Modules

sass

typescript

reactjs

css-modules