问题
React17 升级到 18 之后，行内样式借助 Radium 包实现 hover 和 媒体查询，无法生效。
npm i radium -S 下载 Radium 依赖包
App.js
import Radium from 'radium'
const styleObj = {
width: 100,
height: 100,
backgroundColor: '#FAE',
':hover': {
backgroundColor: '#AFE'
},
// 宽度最小值为1000时
'@media (min-width: 1000px)': {
width: 200
}
}
function App () {
return (
<div style={ styleObj }>
</div>
)
}
export default Radium(App)
index.js (React18写法)：hover 及媒体查询均无效
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// 引入 StyleRoot 包裹 App 以实现媒体查询
import { StyleRoot } from 'radium'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<StyleRoot>
<App />
</StyleRoot>
</React.StrictMode>
);
index.js (React17写法)：生效
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// 引入 StyleRoot 包裹 App 以实现媒体查询
import { StyleRoot } from 'radium'
ReactDOM.render(
<React.StrictMode>
<StyleRoot>
<App />
</StyleRoot>
</React.StrictMode>,
document.getElementById('root')
);
由于安装的是 React18，所以控制台会报如下警告：
疑惑
想知道 React18 怎样才能使用 Radium ?