Typescript道具和CSS模块主题化

Question

我正在使用CSS模块创建一个带有typescript的react组件库，以使项目变得简单，但在主题化方面，我很难使用typescript接口。我想让我的组件有几个变体，用户只需根据自己的需求更改属性即可。

如果没有CSS模块，例如只使用SCSS，当我添加prop className=${styles.theme}时，我可以使它工作，但当我更改为模块时，它停止工作，它不会再从按钮重新调整接口属性。

像这样(按钮.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