标签: material-ui

我正在使用 Material UI v4，我正在从单个文件导出我的样式，但这些样式在其他组件中不起作用。styles.js

const useStyles = makeStyles(theme => ({
    root: {
      display: 'flex',
    },
    // textField component styles
    textFieldInput: {
      margin: theme.spacing(2),
      width: 250,
      minWidth: 250,
    },
    formControl: {
      margin: theme.spacing(2),
      minWidth: 120,
    },


})
export {useStyles}

在我的组件文件中

    ....
    const classes = useStyles(styles);

    return (
        <TextField
            className={classes.textFieldInput}
            label={label}
            placeholder={label}
            error={touched && invalid}
            helperText={touched && error}
            {...input}
            disabled={disabled || false}
            readOnly={readOnly || false}
            required={required || false}
            InputProps={{ readOnly, ...custom }}
            {...custom}
        />
    );
     ....

当我在我的组件中使用它时，样式将在第一次热重载时起作用，但之后样式不会有任何影响，为什么？以及我如何解决这个问题

我正在将材料表（https://material-table.com/#/）用于反应项目，并且我已经导入了我需要使用的图标，但是在操作栏中，操作显示为纯文本，并且不是作为材料图标。

import React, { forwardRef } from 'react';
import MaterialTable from 'material-table';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Print from '@material-ui/icons/Print';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const Table …

我想将样式与 MUI v5 中的组件文件分开。我在 v4 中的做法是makeStyles这样的：

Page.style.js：

import { makeStyles } from "@material-ui/core";

export const useStyles = makeStyles({
  root: {
    background: "white",
  },
});

Page.js：

import React from "react";
import useStyles from "./Page.style";

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

makeStyles现在是遗产，我听说它将在下一个版本中被弃用。在 v5 中将样式和组件分离到不同文件中的正确方法是什么？

从 @mui/material 5.5.0 升级到 5.6.4 后，我的 vite React-ts 应用程序无法运行，并抛出错误：styled_default 不是 Popper.js 的函数，popper 组件正在由自动完成组件使用

主题提供商正在包装整个应用程序

自动完成正在点击 api 来填充选项，但是使用 mui 的新 vite 项目似乎没有这个问题？

任何正确方向的帮助/指示将不胜感激

运行React 17.0.2 vite 2.8.0 mui/material 5.6.4

我正在使用材料 ui 框架的分隔器组件，并且坚持颜色变化方面。对于这个框架中的大多数其他组件，我已经能够通过应用 useStyles() 方法来更改颜色，如下所示：

const useStyles = makeStyles(theme => ({
    textPadding: {
      paddingTop: 10,
      paddingBottom: 10,
      color:'white',
    },
}));

但我无法使用相同的方法更改分隔线的颜色：

const useStyles = makeStyles(theme => ({
dividerColor: {
  backgroundColor: 'white',
},
}));

我当然然后将它应用于组件：

<Divider classname={classes.dividerColor}></Divider>

我查找了它的文档，但无法弄清楚我做错了什么。有人可以帮帮我吗？

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { orange } from '@material-ui/core/colors';

const useStyles = makeStyles(theme => ({
  root: {
    color: theme.status.danger,
    '&$checked': {
      color: theme.status.danger,
    },
  },
  checked: {},
}));

function CustomCheckbox() {
  const classes = useStyles();

  return (
    <Checkbox
      defaultChecked
      classes={{
        root: classes.root,
        checked: classes.checked,
      }}
    />
  );
}

const theme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}> …

我将KeyBoardDatePickerfrom material-ui-pickerswithmoment utils用于 DatePicker。

import React, { Fragment, useState } from "react";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import moment from "moment";

function KeyboardDatePickerExample(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
        <KeyboardDatePicker
          autoOk={true}
          showTodayButton={true}
          value={selectedDate}
          format="D MMM, YYYY"
          onChange={handleDateChange}
          minDate={moment().subtract(6, "months")}
          maxDate={moment()}
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}

export default KeyboardDatePickerExample;

但它不能正常工作。

首先，它没有正确显示日期格式

当我尝试编辑时，它显示随机文本和错误invalid date format。

这是一个重现该问题的沙箱。

我究竟做错了什么？

编辑：

看到 …

我在这里使用select 组件的精确标记

        <FormControl
            variant="outlined"
            className={classes.formControl}
            error={errors.title ? true : false}
          >
            <InputLabel htmlFor="title">Who are you?</InputLabel>
            <Select
              labelId="titleLabel"
              id="title"
              value={state.title ? state.title : 'Example1'}
              onChange={handleChange}
              label="Who are you?"
            >
              <MenuItem value={`Example1`}>Example1</MenuItem>
              <MenuItem value={`Example2`}>Example2</MenuItem>
              <MenuItem value={`Example3`}>Example3</MenuItem>
              <MenuItem value={`other`}>other</MenuItem>
            </Select>
            {errors.title && <FormHelperText>{errors.title}</FormHelperText>}
          </FormControl>

然后我不断收到以下错误，不知道如何解决这个问题

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely …

我有一个使用 MUI 的 React 应用程序，现在我已经使用微调器实现了悬念，它在加载内容时作为后备组件启动。我很想为回退组件添加淡入/淡出过渡，因为目前这种变化太突然了。

我的设置（对于这个特定问题的相关部分）如下：

依赖关系

    "@glidejs/glide": "^3.4.1",
    "@material-ui/core": "4.8.3",
    "@material-ui/icons": "4.5.1",
    "@material-ui/lab": "4.0.0-alpha.39",
    "@material-ui/pickers": "3.2.10",
    "@types/autosuggest-highlight": "^3.1.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "autosuggest-highlight": "^3.1.1",
    "connected-react-router": "^6.8.0",
    "history": "^4.10.1",
    "node-sass": "^4.13.0",
    "react": "^16.12.0",
    "react-date-picker": "^8.0.0",
    "react-dom": "^16.12.0",
    "react-feather": "^2.0.3",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-ducks-ts": "^1.0.9",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "styled-components": "^4.4.1",
    "typescript": "~3.7.2"

路由器块

这是应用程序的主要路由器，它有一个RouteWithSubRoutes组件接收路由作为参数并渲染react-render-dom路由组件，但基本上充当路由器切换容器

import React, { FC, Suspense } from "react";
import …

我试图摆脱主题中存在的最大宽度。
这是我在 Chrome 中看到的（如果我取消选中它，它会做我需要的）：

@media (min-width: 1280px)
.MuiContainer-maxWidthLg {
    max-width: 1280px;
}

我怎样才能做到这一点？我试过这样的事情：

const useStyles = makeStyles(theme => ({
    root: {       
        '& .MuiContainer-maxWidthLg' : {
             maxWidth: //No matter what I put here, it does not work
        }, 

但它似乎没有任何效果......我该如何覆盖它？

谢谢，

亚历克斯