Javascript 如何设置React类组件的样式？

我在React中为我的表单定义了

class

组件，但是当我想要设置样式时，我遇到了一个错误

在函数组件中，我使用

constusestyles=theme=>（{}）

和

constclasses=useStyles（）设置功能组件的样式，并使其正常工作

现在我需要设置
类
组件的样式，我定义了
常量
，在这里我为
类
组件设置了所有样式代码

在
类
组件元素（例如框）中，我使用
样式
属性，如：


它是有效的

在我的
类
组件中，我需要实现
媒体查询
，并使用
材质UI
断点，但当我添加：

const classes=useStyles（）

在
类中
组件不工作

我的目标是在
class
组件中使用
媒体查询
，因为我需要为移动设备提供特殊的
CSS样式
。在功能组件中，我使用
主题.断点.down[“sm”]
，但在
类
组件中，这是不可能的

以下是简化代码：

const useStyles = theme => ({
  searchPanel: {
    display: "flex",
    justifyContent: "center",
    backgroundColor:"red",
    [theme.breakpoints.down("sm")]: {
      backgroundColor:"green"
    }}});

    export default class SearchPanel extends Component {
          render() {
          const classes = useStyles();
          return (
            <h1 className={classes.searchPanel}>Text</h1>
)}}

const useStyles=theme=>({
搜索面板：{
显示：“flex”，
辩护内容：“中心”，
背景颜色：“红色”，
[主题.breakpoints.down（“sm”）]：{
背景颜色：“绿色”
}}});
导出默认类SearchPanel扩展组件{
render（）{
const classes=useStyles（）；
返回(
正文
)}}
设置类组件样式时，可以使用with style：


//您在此处的典型导入。。。
从“@material ui/styles”导入{withStyles}”；
常量样式=主题=>({
搜索面板：{
显示：“flex”，
辩护内容：“中心”，
背景颜色：“红色”，
[主题.breakpoints.down（“sm”）]：{
背景颜色：“绿色”
}
}
});
类SearchPanel扩展组件{
render（）{
const classes=useStyles（）；
返回（文本））；
}
}
导出默认样式（样式）（搜索面板）
看起来你在混合一些概念，因为你可以看出
useStyles
在
类
组件上工作不好，但是如果它工作，为什么不切换到functional呢？你不是从useStyles（）返回的，而且它是一个函数，不需要将其设置为常量。在useStyles中，我也没有看到任何使用“theme”参数的条件代码。此外，在arrow函数体周围不需要paren。加上className值需要是一个字符串，所以在返回之前将JSON转换为字符串