如何在 Material UI React 中以 'sm' 等特定宽度添加像 fullWidth 这样的道具

Question

我想在屏幕尺寸为 600px 或更大（即 sm）时添加 fullWidth 道具。 我正在尝试添加以下代码，但它不起作用。

[theme.breakpoints.down('sm')]: {
  fullWidth: true,
},

Answer 1

您可以使用 isWidthDown 或 isWidthUp 方法。这些在 @material-ui/core/withWidth:

中可用

import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import SomeComponent from './SomeComponent';

class MyComponent extends React.Component {
  render () {
    return <SomeComponent fullWidth={isWidthDown('sm', this.props.width)} />;
  }
}

export default withWidth()(MyComponent);