Radium 行内样式在 React18 中不生效
问题
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 ?
参考链接
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/18115645
posted on 2024-04-05 12:35 shayloyuki 阅读(16) 评论(0) 编辑 收藏 举报