标签: material-ui

在浏览器中，我收到错误消息：

无法编译 ./src/components/layout/search/Searchbar.js 模块未找到：无法解析 'C:\Users\Ja\Desktop\INFA \ProjektInzynierski\Projekt\Engineering-Project\client\src\components\layout\search'

控制台错误：

map-contours.js:16 未捕获的错误：在 webpackMissingModule (map-contours.js:16) at Module../src/components/layout/search/Searchbar.js (map- contours.js:16) at webpack_require (bootstrap:785) at fn (bootstrap:150) at Module../src/components/layout/map/Map2.js (Navbar.js:13) at webpack_require (bootstrap:785)在 fn (bootstrap:150) at Module../src/App.js (App.css?498e:37) at webpack_require (bootstrap:785) at fn (bootstrap:150) at Module../src/index.js (custom-mapbox-gl.css?2ca8:37) at webpack_require (bootstrap:785) at fn (bootstrap:150) at Object.0 (serviceWorker.js:135) at webpack_require (bootstrap:785) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.chunk.js:1

在我将文件“Searchbar.js”位置从布局目录更改为布局/搜索目录后，出现了问题。

似乎编译器正在“C:\Users\Ja\Desktop\INFA\ProjektInzynierski\Projekt\Engineering-Project\client\src\components\layout\search”中搜索“@material-ui/core/IconButton”。

我已经尝试过什么来解决这个问题（随机顺序）：

1）重新安装@material-ui/core

2）纱线添加@material-ui/core

3）纱线添加@material-ui/core@next

4) 更新 npm install react react-dom

5) npm卸载@material-ui/core，并安装@material-ui/core

6) 删除整个 node_modules …

我可以更改 React Material-Table 表标题列上的默认排序图标吗？前任。我想将 asc 排序图标更改为 ArrowDownward，将 desc 排序图标更改为 ArrowUpward。我尝试在 MaterialTable 上设置 SortArrow 图标道具，但它会显示在每个表格标题列上，即使它不是活动的排序列。请帮忙。

材料表

代码：

<MaterialTable ... icons={{ SortArrow: () => <ArrowDownwardIcon /> }}

如何更改材质 UI 日期选择器图标？

我在代码或文档的 API 部分的任何地方都看不到它。

这是他们文档的链接：https : //material-ui.com/components/pickers/

import 'date-fns';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from '@material-ui/pickers';

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54'));

  const handleDateChange = date => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }} …

我想将一些 TextFields 包装在一个概述的容器中，我找到了这个答案。我想要的这项工作：

但是，当我单击内部文本字段时，所有文本字段都集中了：

这是我的代码：

import React from "react";
import ReactDOM from "react-dom";

import OutlinedDiv from "./OutlinedDiv";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";

function App() {
  return (
    <div className="App">
      <OutlinedDiv label="DIV">
        <Grid container justify="center" alignItems="center" spacing={3}>
          <Grid item sm={4} xs={12}>
            <TextField label="Text1" variant="outlined" />
          </Grid>
          <Grid item sm={4} xs={12}>
            <TextField label="Text2" variant="outlined" />
          </Grid>
          <Grid item sm={4} xs={12}>
            <TextField label="Text3" variant="outlined" />
          </Grid>
          <Grid item sm={4} xs={12}>
            <TextField label="Text4" variant="outlined" />
          </Grid>
          <Grid item sm={4} …

我有一个输入字段，我通过 onKeyUp 处理输入（因为我需要访问event.which）。这很有效，因为我只是通过获取输入的内容，event.target.value但是当我尝试重置输入字段的值时遇到了问题。

我正在使用功能组件，因此无法通过 refs 访问输入，我使用 useRef 找到的所有示例仅展示了如何聚焦输入字段，而不是如何清除它。

我忘了提到我正在使用 Material-UI。

无法更改禁用按钮的样式。我尝试了这里讨论的方法https://github.com/mui-org/material-ui/issues/13779

美版-

"@material-ui/core": "3.8.1",

"@material-ui/icons": "3.0.1",

           const styles = theme => ({
              fabButton: {
                 boxShadow: 'none',
                 backgroundColor: '#fff', 
              },
              disabled: {
                 backgroundColor: '#fff', 
              },
             icon: {
                width: '20px', 
                 height: '20px', 
                 color: grey[600],
               },
            });


          <Hint title="Previous">
              <Fab 
                size="small" 
                classes={{
                  root: classes.fabButton,
                  disabled: classes.disabled
                }}
                disabled={true}
                component="div"
                onClick={onClickHandle}
              >
                <IconChevronLeft className={classes.icon} />
              </Fab>
            </Hint>

或者

           const styles = theme => ({
              fabButton: {
                 boxShadow: 'none',
                 backgroundColor: '#fff', 
                 '&:disabled': {
                      backgroundColor: '#fff',   
                 }
              },
              icon: {
                 width: '20px', 
                 height: '20px', 
                 color: …

我在材质 ui 中的Tabs 组件中自定义了代码，

  <AppBar position="static">
    <Tabs
      variant="fullWidth"
      value={value}
      onChange={handleChange}
      aria-label="nav tabs example"
    >
      <LinkTab label="Page One" href="/drafts" {...a11yProps(0)} />
      <LinkTab label="Page Two" href="/trash" {...a11yProps(1)} />

    </Tabs>
  </AppBar>
  <TabPanel value={value} index={0}>
    Page Onee
  </TabPanel>
  <TabPanel value={value} index={1}>
    Page Two
  </TabPanel>

它基本上是两个选项卡，单击其中一个会显示文本“Page Onee”，单击另一个选项卡，则会显示文本“Page Two”。

但是，我希望能够使用反应路由器，以便我可以将一个组件带到每个选项卡并分配路由。在反应路由器中，它会是这样的（我知道反应路由器还有更多的事情要做，但在选项卡代码中就是这样）：

<Link class="nav-link" to="/component1">Click here to see component1</Link>

<Link class="nav-link" to="/component2">Click here to see component2</Link>

但是在我向您展示的第一段代码中（我从材料 ui 中定制的那个）我有这些<TabPanel>标签。

有没有一种简单的方法可以将反应路由器放入其中？

如果不可能包含反应路由器，我如何仍然能够使用该材质 ui 代码呈现我的组件？

我正在创建一组使用 CSS 进行样式设置的可重用组件（包装材料用户界面）。我需要通过传递给自定义按钮的道具动态设置组件的宽度。

我想使用类名来合并为 MyButton 定义的 const 根样式（我已经在沙箱中将其剥离了，但它设置了颜色、图标等）和可以根据传入的道具定义的动态 sizeStyle。

  const sizeStyle: JSON =  { minWidth: "300px !important"};


  //always apply the buttonstyle, only apply the size style if a width prop has been supplied
  const rootStyle: Object = classNames({
    buttonStyle: true,
    sizeStyle: props.width
  ///});   

我不明白为什么样式没有应用于页面上有一个道具通过的第一个按钮 - 我可以在控制台上看到应该应用这两种样式。

沙盒在这里：https : //codesandbox.io/s/css-styling-custom-muibutton-width-as-prop-36w4r

TIA

使用 TextField 作为 Select 的输入参数会给出以下警告：

Material-UI:children使用TextField组件时必须传递select。

<Select
    multiple        
    value="value"
    fullWidth
    input={
        <TextField name="name" id="id" variant="outlined" label="test"/>
    }
>
 <MenuItem>1</MenuItem>
 <MenuItem>2</MenuItem>
</Select>

什么是相同的正确实施？

我想禁用 Material-UI 的 SpeedDial 组件（https://material-ui.com/api/speed-dial/）的默认鼠标悬停/悬停行为。当前，当您将鼠标悬停在主图标上时，SpeedDial 组件将打开。它也会在点击时打开。这给我们的一些用户造成了问题，因为当他们将鼠标悬停在按钮上时 - 它会打开 - 他们立即单击并关闭。

我想保留用于打开触摸屏设备快速拨号的点击操作。

有没有一种简单的方法可以禁用悬停/鼠标悬停事件？据我所知，API 不允许这样做。

谢谢！