React scss 模块：子类覆盖作为道具传递的父类

Question

I have a component called as Overlay which has top, left , width, height, etc properties written in its scss module file

This overlay component is used in various other components as a child. I am passing className as props to this overlay component so as to override any default css given to overlay:

const Overlay: React.FC<OverlayProps> = props => {
  const { className, onClick } = props;
  return <div id="real-overlay" className={`${className} ${styles.overlay}`} onClick={onClick}></div>;
};

But the class which is being passed as props is getting overridden by styles.overlay class from the overlay component style file.

How can I make className from props take precedence?

Answer 1

您可以像这样更改顺序：

className={`${styles.overlay} ${className}`}