要解决这个问题,你可以使用babel-plugin-react-css-modules的配置选项来指定在style标签中不更改类名。
首先,确保你已经安装了babel-plugin-react-css-modules插件,并在.babelrc文件中进行了配置。
然后,在.babelrc文件中的plugins数组中添加以下配置选项:
{
"plugins": [
["react-css-modules", {
"generateScopedName": "[name]__[local]___[hash:base64:5]",
"attributeNamespaced": false
}]
]
}
在上述配置中,我们将attributeNamespaced设置为false,这样就可以确保在style标签中不更改类名。
接下来,你可以在你的React组件中使用CSS modules:
import React from 'react';
import styles from './MyComponent.css';
const MyComponent = () => {
return (
Hello, World!
);
};
export default MyComponent;
在上述代码中,我们使用了styles.container和styles.title来引用CSS模块中定义的类名。这样,即使在style标签中,类名也不会被更改。
这就是使用babel-plugin-react-css-modules插件的解决方法,以确保在style标签中不更改类名。