标签: material-ui

假设有一个我喜欢的React组件,但想要修改.对于此示例,我们将使用Material UI LinearProgress.我想用它制作一个可点击的搜索栏.

class SeekBar extends LinearProgress {
  componentDidMount() {
    super.componentDidMount();
    console.log('my stuff here');
  }
}

但我觉得,就改变render回报而言,我可以做的事情非常有限.不过,也许我会把这一切都搞错了.如果我喜欢特定的React组件,例如Material UI组件,那么自定义其外观和功能并使其成为我自己的好的,可重用的方法是什么？

我遇到了一些问题,将Material UI添加到我的React项目中,该项目使用Typescript编程.

根据教程,我首先添加react-tab-event-plugin.

import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

这样做,我得到一个关于缺少默认导出的错误.

ERROR in ./src/index.tsx
(4,8): error TS1192: Module ''react-tap-event-plugin'' has no default export.

添加材质UI

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

引发以下构建错误

ERROR in ./src/containers/index.tsx
(8,25): error TS2307: Cannot find module 'material-ui/styles/getMuiTheme'.

ERROR in ./src/containers/index.tsx
(9,30): error TS2307: Cannot find module 'material-ui/styles/MuiThemeProvider'.

我的Webpack配置非常简单,并且在我添加打字时,每个React npm模块都可以使用,直到现在.

var cssnext = require('postcss-cssnext')
var postcssImport = require('postcss-import')
var …

我的Component样子

import React, {PropTypes} from 'react';
import TransactionListRow from './TransactionListRow';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from 'material-ui/Table';

const TransactionList = ({transactions}) => {
  return (
    <Table>
      <TableHeader displaySelectAll={false}>
        <TableRow>
          <TableHeaderColumn>Name</TableHeaderColumn>
          <TableHeaderColumn>Amount</TableHeaderColumn>
          <TableHeaderColumn>Transaction</TableHeaderColumn>
          <TableHeaderColumn>Category</TableHeaderColumn>
        </TableRow>
      </TableHeader>
      <TableBody>
        {transactions.map(transaction =>
          <TransactionListRow key={transaction.id} transaction={transaction}/>
        )}
      </TableBody>
    </Table>
  );
};

TransactionList.propTypes = {
  transactions: PropTypes.array.isRequired
};

export default TransactionList;

测试是

import {mount} from 'enzyme';
import TransactionList from './TransactionList';
import {TableHeaderColumn} from 'material-ui/Table';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

describe("<TransactionList />", ()=> {
  it('renders …

我不太了解React Material-UI网格系统.如果我想使用表单组件进行登录,那么在所有设备(移动设备和桌面设备)上将其集中在屏幕上的最简单方法是什么？

尝试将工具提示转换为依赖于 onClick 事件的受控组件这在移动和网络中工作正常，但它失去了在悬停时显示工具提示的原始行为是否有解决方案使工具提示在悬停和 onClick 上都工作

在 Material UI v5 的 prop 中寻找巧妙的条件样式sx。我玩过的一个例子是：

const statusStyle = (status) => {
  switch (status) {
    case "aborted":
      return "#D66460";
      break;
    case "queue":
      return "#6685F0";
      break;
    case "processing":
      return "#F0E666";
      break;
    default:
      return "#60D660";
  }
};

<TableRow
  key={job.job}
  sx={{ color: statusStyle(status) }}
>

但我想知道是否有人想出了更优雅的东西？

我Material-UI在我的项目中使用，我在控制台中收到警告：

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

虽然没有直系后裔，

<form>
  <TextField
    label="Title"
    value={title}
    onChange={this.handleChange("title")}
    className={classes.formControl}
    margin="normal"
  />
  <br />
  <FormControl className={classes.formControl}>
    <InputLabel>Muscles</InputLabel>
    <Select
      value={muscles}
      onChange={this.handleChange("muscles")}
    >
      {categories.map((category, index) => {
        return (
          <MenuItem key="index" value={category}>
            {category}
          </MenuItem>
        );
      })}
    </Select>
  </FormControl>
  <br />
  <TextField
    multiline
    rows={4}
    label="Description"
    value={description}
    onChange={this.handleChange("description")}
    className={classes.formControl}
    margin="normal"
  />
</form>

这是沙盒链接：

https://codesandbox.io/s/react-material-ui-0yqeo

我安装了 material-ui-search-bar 然后我想使用 SearchBar。但我有下一个问题：

./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve 'material-ui/AutoComplete' in '...node_modules/material-ui-search-bar/lib/components/SearchBar'

我该如何解决？

根据设计，单击 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 …