标签: material-ui

我有一个SVG文件,我想用它制作一个SvgIcon组件,我应该怎么做？

在文档中,所有示例都使用预定义的材质图标或奇怪的符号<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />,我不知道它是什么!

给出如下卡片代码: 卡片

如何更新卡片样式或任何材质UI样式

    const styles = theme => ({
    card: {
    minWidth: 275,
  },

如下:

    const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

当我尝试最新的那个时,我得到了

 Line 15:  'props' is not defined  no-undef

当我更新代码时:

const styles = theme =>  (props) => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

也

 const styles  = (theme ,props) => ({
        card: {
        minWidth: 275, backgroundColor: props.color  },

代替

const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color …

根据设计，单击 material-ui<Select>组件（或<TextField select>组件）会导致菜单项出现在覆盖原始 Select/TextField 元素的位置。

<Select ...>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

是否可以覆盖此定位（无论是使用 JSS 还是使用新组合），以便菜单项直接在原始 Select/TextField 元素下对齐？

任何指导将不胜感激。谢谢你。

我正在使用 material-ui自动完成组件并尝试使用 react-testing-library 对其进行测试

组件：

/* eslint-disable no-use-before-define */
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import React from 'react';

export default function ComboBox() {
  const [autocompleteInputValue, setAutocompleteInputValue] = React.useState('');
  const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState(false);
  const renderInput = (params: any) => <TextField {...params} label='openOnFocus: false' variant='outlined' />;

  const getTitle = (option: any) => option.title;

  const handleAutocompleteInputChange = (event: any, value: string) => {
    setAutocompleteInputValue(value);
  };

  const updateAutocompletePopper = () => {
    setIsAutocompleteOpen(!isAutocompleteOpen);
  };

  return (
    <Autocomplete …

inputProps和之间有什么区别InputProps？下面的2TextField做同样的事情。我什么时候必须选择其中之一？

<TextField
  label="inputProps"
  inputProps={{
    name: 'inputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>

<TextField
  label="InputProps"
  InputProps={{
    name: 'InputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>

我正在尝试使用material-ui创建一个简单的导航栏,看起来就像他们在网站上使用的那个.这是我写的试图复制它的代码:

import React from 'react'
import {AppBar, Tabs, Tab} from 'material-ui'

class Nav extends React.Component {
  render() {
    return (
      <AppBar title="My App">
        <Tabs>
          <Tab label="Item 1" />
          <Tab label="Item 2" />
          <Tab label="Item 3" />
          <Tab label="Item 4" />
        </Tabs>
      </AppBar>
    )
  }
}

React.render(<Nav />, document.body)

问题是,标签出现非常奇怪,单击选项卡没有任何效果.截图:

任何帮助将非常感谢.

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

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

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

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

我正在尝试创建一个<ButtonGroup> 带有禁用按钮和工具提示的材质 UI 。

以下代码块正确显示了按钮，但如此处所述 ( https://material-ui.com/components/tooltips/#disabled-elements ) 无法为禁用元素提供工具提示。

<ButtonGroup>
    <Tooltip title={"This is button A"}>
        <Button>{"Button A"}</Button>
    </Tooltip>
    <Tooltip title={"This is button B"}>
        <Button disabled>{"Button B"}</Button>
    </Tooltip>
</ButtonGroup>

但是，如果我<span>在禁用按钮周围添加一个，则组布局将被破坏。

<ButtonGroup>
    <Tooltip title={"This is button A"}>
        <Button>{"Button A"}</Button>
    </Tooltip>
    <Tooltip title={"This is button B"}>
        <span>
            <Button disabled>{"Button B"}</Button>
        </span>
    </Tooltip>
</ButtonGroup>

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

成分 ：

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

我该如何解决这个错误？

我们的一些用户在提交表单时遇到这些错误（getReadModeConfig、getReadModeRender、getReadModeExtract）。我们正在使用 React 与 Material UI 作为表单。不知道这些错误究竟是什么意思。任何帮助，将不胜感激