标签: material-ui

我正在尝试使用react-testing-library 测试Select 组件的onChange事件。

我使用getByTestId效果很好的元素获取元素，然后设置元素的值，然后调用fireEvent.change(select);但onChange从未调用过并且状态从未更新过。

我已经尝试使用 select 组件本身以及获取对底层input元素的引用，但都不起作用。

任何解决方案？或者这是一个已知问题？

你能告诉我为什么我收到错误“一个组件正在改变一个不受控制的自动完成来控制。元素不应该从不受控制切换到受控制（反之亦然）。决定在整个生命周期内使用受控制或不受控制的自动完成元素组件。”

成分 ：

function AutoComplete(props) {

  const defaultProps = {
    options: props.options,
    getOptionLabel: option => option.name,
  };

  const handleChange = (e, value) => {
    props.onChange(value);
  };

  return (
    <Autocomplete
      {...defaultProps}
      renderInput={params => (
        <TextField {...params} label={props.label} margin="normal" />
      )}
      onChange={handleChange}
      value={props.value}
    />
  );
}

调用自动完成：

               <Controller
                control={control}
                name = 'country'
                as = {
                  <AutoComplete
                    options={countryOptions}
                    onChange={selectCountryHandler}
                    label="Country"
                    value={selectedCountry  || ''}
                  />
                } />

我该如何解决这个错误？

我一直试图找出如何设置一个material-ui.next文本域组件(React JS)的样式.

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
/>

我的课程创建如下(我已附上相关部分):

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        color: 'white',
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
});

我的问题是,我似乎无法将文本字段的颜色更改为白色.我似乎能够在整个文本字段中应用样式(因为宽度样式工作等)...但我认为问题是我没有在链中进一步应用样式并进入实际输入.

我试图查看处理传递inputProps的其他答案,但没有成功.

尽我所能尽力尝试了一切,但我想我是否需要问是否有人知道我做错了什么.

提前感谢您的时间.问候.安德烈

它目前的样子

我正在使用Material UI v1.0.0-beta23以及redux-form和redux-form-material-ui.我有一个类型编号的字段,我想在标签上设置最小值和最大值.我已经尝试了inputProps和min/max,似乎都没有做我想要的.我查看了源代码,但没有看到明显的方法.是否可能,如果可能,怎么样？

这是我的JSX展示我尝试过的东西.

  <Field
    name="maxNodeSelectedCount"
    component={TextField}
    label="Max Node Selected Count"
    type="number"
    inputProps={{ min: 0, max: 10 }}
    min={11}
    max={20}
    format={formatOption}
    normalize={normalizeOption}
    {...propertyFieldDefaults}
  />

这是DOM的样子:

<input type="number" class="MuiInput-input-346 MuiInput-inputSingleline-349 MuiInput-inputDense-347" value="-3" name="options.maxNodeSelectedCount">

我是Material-UI的新手,刚开始使用菜单示例摆弄他们的App栏.当切换菜单下拉菜单时,它会打开Appbar本身,而我希望它在Navbar下方打开.

从文档中,我知道这可以通过这里Anchor EL解释完成.但是,当我实现这个组件时,没有任何反应.什么是"正确的材料 - UI方式"来处理这个问题？menu

class Header extends React.Component {
  state = {
    auth: true,
    anchorEl: null,
    anchorOriginVertical: 'bottom',
    anchorOriginHorizontal: 'right',
    transformOriginVertical: 'top',
    transformOriginHorizontal: 'right',
    anchorReference: 'anchorEl',
  };

  handleChange = (event, checked) => {
    this.setState({ auth: checked });
  };

  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { classes } = this.props;
    const { auth, anchorEl } …

我有一个包含多个项目的行,我希望所有项目的高度等于最高项目的高度,我基本上希望所有项目与此网格的高度相同.

<Grid container layout={'row'} spacing={8}>
      <Grid item className={classes.section} xs={12} sm={12} md={4} lg={4} xl={4}>
        <div className={classes.teamMemberName}>
          {name}
        </div>
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <FirstTimeFillRate fillRate={firstTimeFillRate} />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <BackOrders
          backOrdersByItem={backOrdersByItem}
          backOrdersStoresWait={backOrdersStoresWait}
        />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <OrderVolume orderVolume={orderVolume} />
      </Grid>

      <Grid item xs={12} sm={12} md={8} lg={8} xl={8} className={classes.section}>
        <Inventory inventory={inventory} />
      </Grid>
    </Grid>

section类的背景颜色为灰色,我可以看到这些部分没有继承行的高度,如此沙箱中所示:https://codesandbox.io/s/1826lw51z3

我似乎无法弄清楚如何更改轮廓颜色的轮廓颜色我看了看GitHub问题,人们似乎指向使用"InputProps"属性,但这似乎什么都不做. 这是我当前状态下的代码

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import PropTypes from 'prop-types';

const styles = theme => ({
field: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    height: '30px !important'
},
});

class _Field extends React.Component {
      render() {
          const { classes, fieldProps } = this.props;
             return (
                <TextField
                {...fieldProps}
                label={this.props.label || "<Un-labeled>"}
                InputLabelProps={{ shrink: true }} // stop from animating.
                inputProps={{ className: classes.fieldInput }}
                className={classes.field}
                margin="dense"
               variant="outlined"
            />
        );
    }
}

_Field.propTypes = { …

NoRowsOverlay应用过滤器后，该过滤器不起作用，因此没有可显示的行。

这是我的代码：

function customNoRowsOverlay() {
    return (
        <GridOverlay>
            <div>No Rows</div>
        </GridOverlay>
    )
}

components={{ NoRowsOverlay: customNoRowsOverlay }}

如果应用过滤器后没有要显示的行，我需要显示“无行”消息。但是，如果您有以上代码，则可以使用rows={[]}

我从 Mui 4 迁移到 5，想知道如何使用类名。如果我想将某些样式仅应用于一个组件，则可以使用 SX 属性。但是，我正在努力为多个组件使用相同的类。在 v4 中，我的代码如下所示：

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      padding: theme.spacing(1),
      margin: 'auto',
    },
  })
)

我可以在任何组件中导入这个useStyles钩子并像这样使用它：

const classes = useStyles()
...
<div className={classes.root}>...</div>

该文档说，我可以“用类名覆盖样式”，但他们没有告诉如何做到这一点： https://mui.com/customization/how-to-customize/#overriding-styles-with-class -名称

我是否必须将这些样式放入外部 CSS 文件中？

.Button {
  color: black;
}

我宁愿在我的 ts 文件中定义样式。

我还找到了这个迁移指南： https ://next.material-ui.com/guides/migration-v4/#migrate-makestyles-to-emotion

我不喜欢方法一，因为使用这个 Root 包装器，有条件地应用类很不方便。（特别是对于打字稿，有一些开销）方法二带有外部依赖项和一些样板代码。

理想情况下，我会使用这样的样式，也许在样式对象周围使用一个说唱歌手函数：

export const root = {
  padding: theme.spacing(1),
  margin: 'auto',
}

<div className={root}>...</div>

当然，最后一种方法不起作用，因为 className 需要一个字符串作为输入。有人知道有很少样板代码的替代方案吗？

一些背景

我们的团队使用 Material UI 已经有一段时间了，我们很喜欢它。随着 Material UI v5 的发布，我们花时间检查下一步将使用哪种样式解决方案，因为 JSS 已被 MUI 团队放弃。

我们最终关注了Shopify 人员的讨论。他们对造型解决方案进行了非常详细的比较，最终选择了香草精作为他们的选择工具。强大的 TypeScript 支持，以及最重要的零运行时方法，让我们深信不疑。

遗憾的是，MUI 核心团队在决策时并未考虑香草精。

手头的问题

根据他们的文档， Material UI使用户能够使用各种样式解决方案。可以配置在引擎盖下使用的造型引擎，大致如下所述此处。

问题：

• 使用 vanilla-extract 是否（概念上）可能且（实用上）合理：
  • 设计 MUI 组件？
  • 使用它作为 MUI 底层的样式引擎？
• 洒水会在哪里发挥作用？
• 实施这一方法的具体步骤是什么？
• 有人已经这样做了，并且愿意分享他们的代码吗？

与通常的做法相反，我还没有真正尝试过任何实现方面的方法。根据我的理解，这意味着创建类似于mui-styled-engine（包裹情感）和mui-styled-engine-sc（包裹 styled-components）的东西。因为这对我来说似乎很复杂，所以我想我应该先问一下。