将oneOf-prop用于更改className，CSS模块

可以使用oneOf-prop在React中更改元素的className，并使用CSS模块以确保更改只在当前组件范围内生效。

例如，假设我们有一个组件名为Button，其中包含两个不同的风格：primary和secondary。我们可以使用oneOf-prop根据按钮类型更改className，并使用CSS模块确保只在当前组件范围内应用更改。

Button.js：

import React from 'react';
import styles from './Button.module.css';

const Button = ({ type, children }) => {
  const className = type === 'primary' ? styles.primary : styles.secondary;

  return (
    <button className={className}>
      {children}
    </button>
  );
};

export default Button;

Button.module.css：

.primary {
  background-color: blue;
  color: white;
}

.secondary {
  background-color: white;
  color: black;
}

在这个示例中，我们导入Button模块的样式，并通过一组条件语句使用oneOf-prop来更改className。然后，我们将className应用于按钮元素。不同的className将触发不同的CSS样式，因此我们可以根据需要根据按钮类型更改样式。

使用CSS模块也有另一个好处，即确保所有相同命名的className仅在当前组件范围内生效，因此不需要担心应用程序的其他部分不小心覆盖样式。

现在，我们可以在使用Button组件时使用type属性来指定不同的按钮类型：

import React from 'react';
import Button from './Button';

const App = () => {
  return (
    <div>
      <Button type="primary">Click me!</Button>
      <Button type="secondary">Click me!</Button>
    </div>
  );
};

export default App;