时间戳

首页 > 解决方案 > 使响应宽度通过道具

javascript - 使响应宽度通过道具

问题描述

我在 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}
/>

标签： javascriptreactjsmaterial-ui

解决方案

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

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"}
/>

推荐阅读