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

【问题标题】：Get oneOf-prop to change className, CSS modules获取 oneOf-prop 更改 className、CSS 模块
【发布时间】：2021-04-15 17:22:30
【问题描述】：

这个类名接受一个等于类的 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']),
};

有什么想法吗？

【问题讨论】：

标签： javascript reactjs react-proptypes css-modules

【解决方案1】：

这就是我的做法：

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

【讨论】：

是的，您可以使用反引号而不是使用数组。主要问题是格式化 className 以便我们可以获得道具。如果我们写 ${styles.type}，它会呈现 undefined。