使响应宽度通过道具答案

【问题标题】：Make responsive width passed throught props使响应宽度通过道具
【发布时间】：2020-05-11 12:19:54
【问题描述】：

我在 React 中使用 Material UI，并创建了一个 textField 组件以在所有应用程序中重用它。我面临的问题是当我尝试响应这些组件时，我不知道如何设置断点。

这里有一个例子：

<InputBaseComponent
   placeholder={"Nickname"}
   size={"small"}
   width={250}  --->how can I set up the breakpoints??
   type="text"
   name={"nickname"}
   id={"nickname"}
   onChange={handleChange}
/>

【问题讨论】：

我正在使用材质 UI 断点
您在寻找这样的东西吗？ stackoverflow.com/questions/52484812/…

标签： javascript reactjs material-ui

【解决方案1】：

您可以使用 Material-UI withStyles HOC as 创建自定义组件

import { withStyles, TextField } from "@material-ui/core";

export const MyTextField = withStyles(theme => ({
  root: {
    width: 350,
    backgroundColor: '#f0f0f0',
    [theme.breakpoints.down('sm')]: {
      width: '100%'
    },
    // more breakpoints can be added here also styles
  },
}))(TextField);

并且可以作为普通的TextField使用

<MyTextField 
   placeholder={"Nickname"}
   size={"small"}
   type="text"
   name={"nickname"}
   id={"nickname"}
/>

【讨论】：