标签: material-ui

我有这段代码...我想要一个宽度至少为 250 像素的“列”...我尝试了 Material ui 建议的尺寸调整： https: //material-ui.com/system /sizing/似乎没有任何运气...当窗口大小缩小时，'logo' 元素将缩小到小于 250px。当发生这种情况时，红色网格项（它本身是包含我的实际数据的网格容器）会遮盖徽标。

如何设置 Material ui Grid 项目的最小宽度？

<Grid
    container
    direction="row"
>
    <Grid item xs={3}  >
        <Box width={250}>
            <img src={Logo} key="logo" width="250"  height="100" alt="Logo" />
        </Box>
    </Grid>
    <Grid item style={{ backgroundColor: '#f22' }} xs={9}>
        <Grid
            container
            direction="row"
            justify="flex-start"
            spacing={2}
        >
        {this.panelGrid(eventID, panelData)}
        </Grid>
    </Grid>
</Grid>

我正在努力覆盖选择组件的默认填充以匹配其他文本字段的大小。我知道我需要修改嵌套组件，但一直无法找到有效的解决方案。

<div className='wifi-chooser-column'>
<TextField
    style={{margin: '6px'}} 
    label='SSID' 
    variant='outlined'
    size='small'
/>
<Select
    style={{margin: '6px', padding: '0px'}}
    variant='outlined'
    value={this.state.security}
    onChange={(event) => this.setState({security: event.target.value})}
    classes={{
        select: {
            padding: '10.5px 14px'
        }
    }}
>
    <MenuItem label='security' value='Unsecured'>Unsecured</MenuItem>
    <MenuItem value='WEP'>WEP</MenuItem>
    <MenuItem value='WPA2'>WPA2</MenuItem>
</Select>
<TextField 
    style={{margin: '6px'}} 
    label='Username' 
    variant='outlined'
    size='small'
/>
<TextField 
    style={{margin: '6px'}} 
    label='Password' 
    variant='outlined'
    size='small'
/>

布局问题

我有一个材料 ui 小吃栏，我需要将其显示在屏幕中间。下面是我试图传递的属性，使其显示在屏幕中心，但显示在屏幕顶部。

  anchorOrigin={{
   vertical: "center",
   horizontal: "center"
  }}

https://codesandbox.io/s/snackbar-background-color-f37po是展示该问题的示例。这是怎么回事？

样式组件：

import { Typography } from '@material-ui/core';

const Text = styled(Typography)<TextProps>`
  margin-bottom: 10px;
  color: ${({ textColor }) => textColor ?? textColor};
  font-size: ${({ textSize }) => (textSize ? textSize + 'px' : '16px')};
`;

组件内部的用法：

<GlobalStyled.Text textColor="green" textSize="20">test</GlobalStyled.Text>

“警告：React 无法识别textColorDOM 元素上的 prop。如果您故意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写textcolor。如果您不小心从父组件传递了它，请将其从 DOM 中删除元素。”

道具被传递给Typography组件本身，而不仅仅是样式组件，如何解决这个问题？

更新

5.1.0 版本发布的样式组件： https://github.com/styled-components/styled-components/releases/tag/v5.1.0

现在有新的瞬态道具，可以通过道具过滤解决这个问题。您可以在道具名称前使用$propsName, 美元符号，它将仅传递给样式组件！

我正在尝试将和用作Material-UI Autocomplete多重输入react-hook-formcontroldefaultValues在编辑数据时，根据从数据库获取的已保存数据渲染预填充的组件）

所以主要问题是：

控制Material-UI Autocomplete组件中的默认值并将其与react-hook-form？

到目前为止我做了什么：

\n

1. 通过在 React 中使用函数和钩子，我在 React Hook Form 中包装了一个自动完成组件Controller来控制状态。我尝试实现 MUI 文档中的解决方案\nandreact-hook-form以及以下线程的解决方案。

   \n

   我在这里创建了一个最小的沙箱

   \n
\n

它能做什么

当我设置defaultValuein时Controller，它可以显示受控的默认值，但会引发错误：TypeError: Cannot read property \'filter\' of undefined

  <Controller\n      as={\n      <Autocomplete\n        multiple\n        value={defaultValues}\n        onChange={(e, values) => setValue("food", values)}\n        ...\n        renderInput={params => ( ... )}\n      />\n    }\n    control={control}\n    name="food"\n    defaultValue={defaultValues} // <- this makes the …

我将像这样打破一行网格项目。 正如您所看到的图像，网格的其余空间应该是空的。

<Grid container spacing={3}
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
  <Grid item xs={4}>
    "Grid Item xs={4}"
  </Grid>
  // empty space
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
</Grid>

我应该使用内部grid container吗？或者我应该使用display flex？

有什么方法可以增强https://material-ui.com/components/backdrop/中示例的背景，以仅在单个组件上方显示加载圆圈（以防某些页面有更多组件），而不是在整个页面上方显示？

感谢您的回复。

我希望我的 Typography 字段变得可编辑，因此我将其转换为输入。
现在我希望这个输入具有相同的样式。
怎么做？
我尝试将生成的 css 复制到输入中，但这很乏味并且看起来并不完美。

这是一个代码沙箱来说明：https://codesandbox.io/s/flamboyant-stonebraker-le1eq?file=/index.js

所以我明白我可以做一个这样的按钮组，这很棒。

然而，我怎样才能做到这一点，当按下所说的按钮之一时，它看起来像是被选中了呢？因为这一切都是点击效果？

基本上我想做的是，当单击按钮时，它将输入值更改为按钮的值。但我希望该按钮看起来像是已被选中。

    <ButtonGroup disableElevation variant="contained" color="primary">
      <Button>One</Button>
      <Button>Two</Button>
    </ButtonGroup>

我希望容器方向为 md 尺寸屏幕上方的“行”和 md 尺寸屏幕下方的“列”？我该如何实施？

<Grid container direction = "row"(in large screens)/direction = "column"(in small screens)>

我尝试过这个。

<Grid container classes={gridDirection}>

 gridDirection: {
    direction = "row",
    [theme.breakpoints.down('md')]: {
      direction = "column",
    },
  }

但它不起作用可能是因为“direction”是一个react prop而不是CSS样式。有没有办法访问样式表文件中的这些反应道具？