Question

我在React中为表单定义了class组件，但是在设置样式时出现错误。

在功能组件中，我使用const useStyles = theme => ({})和const classes = useStyles();对功能组件进行样式设置，并且可以正常工作。

现在，我需要为class组件设置样式，并定义了constants，在其中放置了class组件的所有样式代码。

在class组件元素（例如Box）中，我使用style属性，如：

<Box style={nameOfTheContant}/>

，并且有效。

在我的class组件中，我需要实现media queries，为此我使用Material UI断点，但是在添加时：

const classes = useStyles();

在class组件内部，它不起作用。

我的目标是在media queries组件内使用class，因为我需要为移动设备设置特殊的CSS style。在功能组件中，我使用theme.breakpoints.down["sm"]，但在class组件中，这是不可能的。

这是简化的代码：

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>
)}}

Answer 1

在样式类组件时可以使用withStyles：

// your typical imports here ...
import { withStyles } from "@material-ui/styles";

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

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

export default withStyles(styles)(SearchPanel);

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

1 个答案: