获取 oneOf-prop 以更改 className、CSS 模块

编程问答 2022-05-11

问题描述

这个类名接受一个等于一个类的 oneOf-prop（例如：'primary'）。我想弄清楚如何格式化这个类名，以便它与 CSS 模块一起工作。

如果我们将primary作为prop传入，下面的代码会将类名呈现为styles.primary。但是我们不会让 css-modules 处理它。 See this image of rendered classnames

import styles from '../../styles/components/buttons/Cta.module.css'; 
   
export const CTA = ({ fit,type,...props }) => {
    const mode = fit ? styles.fit : styles.fill;
    return (
      <button
        type="button"
        className={[styles.cta,`styles.${type}`,mode].join(' ')}
        {...props}
      >
      </button>
    );
  };
  CTA.propTypes = {
    fit: PropTypes.bool,type: PropTypes.oneOf(['primary','secondary','tertiary','disabled']),};

有什么想法吗？

解决方法

我是这样做的：

 <li className={`${css.notification} ${css.important}`}>
css-modulesjavascriptreact-proptypesreactjsreactjsreactjsreactjs