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 ?

参考链接

简单的使用Radium管理React中的内联样式