标签: material-ui

我正在尝试一些非常简单的事情：使用 Material-UI 主题为网站构建两个主题：

一个light主题和dark一个，但效果不佳：主题位于每个 Material-UI react 元素上，但 html 文档上的根元素保持相同的默认白色背景。

当然可以通过纯.css攻击body来改变：

body {
  background-color: #222;
}

但是我想用 React 动态改变它，我虽然这会起作用，但它不会：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@material-ui/styles';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const themeLight = createMuiTheme({
  palette: {
    background: {
      default: "#e4f0e2"
    }

    },
});

const themeDark = createMuiTheme({
    palette: {
      background: {
        default: "#222222",
      }

    },
});

ReactDOM.render(
     <MuiThemeProvider theme = { themeDark }> …

我的反应代码中有一个问题。

我使用 Material-ui 和 redux-form。我有像这样的选择输入，在改变这个选择后，我应该在 . 我使用 react-form 中的 action 'change' 并为 textfield 设置值。但标签 in 仍然存在。我可以清除或重置 中的值吗？

<Autocomplete
    options={list}
    getOptionLabel={option => option.name}
    onInputChange={onChange}
    onChange={onChangeAutoComplete}
    noOptionsText='??? ????????? ?????????'
    loadingText='????????...'
    openText='???????'
    renderInput={params => (
        <Field
            {...params}
            label={label}
            name={fieldName}
            variant="outlined"
            fullWidth
            component={renderTextField}
            className={classes.textField}
            margin="normal"
        />
    )}
/>

我正在尝试从 Material-UI v4 迁移到 v5（目前处于测试阶段），但我不确定是否替换StylesProvider为StyledEngineProvider. 没有提及它（请参阅https://next.material-ui.com/guides/migration-v4/）。迁移指南仅提到StylesProvider应直接从@material-ui/styles（而不是@material-ui/core/styles）导入。它还提到使用StyledEngineProviderwithinjectFirst选项来处理 css 顺序。然而，这就是为什么StylesProvider我需要使用StylesProvideror时我会感到困惑StyledEngineProvider。

我用StyledEngineProvider代替吗StylesProvider？或者因为他们都做同样的事情所以并不重要？或者，StylesProvider如果我仍在使用 JSS，我是否需要使用，并且仅StyledEngineProvider当我不再使用 JSS 且仅使用 Emotion 时才使用？任何澄清将不胜感激。

在 github 操作中运行 cypress 测试时，我们有一个奇怪的行为。MUI datepicker 日期选择器处于只读模式，我们无法输入任何日期（在其他环境中没问题）。

1. 赛普拉斯的错误

   CypressError：4000 毫秒后超时重试：cy.clear()失败，因为该元素是只读的： <input aria-invalid="false" readonly="" type="text" aria-readonly="true" aria-label="Choose date" class="MuiOutlinedInput-input MuiInputBase-input css-1x5jdmq" value="">

2. 从视觉上看，日期选择器没有任何按钮（正在发生某些事情）：

3. 控制台日志没有显示错误或警告

在其他环境（Windows/Linux）上，即使我们以无头模式（所有带有 UI 的桌面）启动测试，测试也能正常工作。MUI 日期选择器看起来与 MUI 文档（链接）中的一样好。

Github 操作如下所示：

on:
  workflow_dispatch:

defaults:
  run:
    working-directory: ic3-test
jobs:
  build:
    runs-on: ubuntu-latest
    container: cypress/included:8.6.0

    steps:    
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
         node-version: '16'
    
    - name: Install dependencies
      run: npm install
      working-directory: ic3-test
                
    - name: Cypress run with env
      uses: cypress-io/github-action@v2
      with:
          # headless: true
          browser: chrome …

我正在尝试将Material-UI 样式安装到 React 项目，但每当我在终端中运行此命令时：

npm i @mui/styles

它读取以下消息：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: apollo-music-share@0.1.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"^18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/styles@5.8.0
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"*" from the root project

这是 React 中的代码：

import { HeadsetTwoTone } from "@mui/icons-material";
import { AppBar, Toolbar, …

MUI 组件中的 style 和 sx prop 几乎做同样的事情。sx 属性提供了一些简写语法，并允许您访问主题对象。但除此之外，它们看起来完全相同。你什么时候应该使用其中一种而不是另一种？

我使用withStyles()HOC来覆盖一些MUI组件样式,主题和断点.

显然有一些我不明白的地方,因为我不断遇到这样的错误:

警告:Material-UI:tab提供给classes属性的键未在Items中实现.

您只能覆盖以下其中一项:卡片,详细信息,内容,封面,头像,锁定

示例代码:https://codesandbox.io/s/6xwz50kxn3

我有一个<List />组件及其子<Items />.

我的目的是将demo.js文件中的样式仅应用于<List />组件,将demoChild.js中的样式应用于<Items />Component.

我真的很感激我对错误的解释,也许是一个解决方案？

注意:我发现其他帖子具有相同的错误,但它们似乎与我的示例有所不同.

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

我在这里有这个代码：

我想有 3 个带有 + 和 - 符号的小方形按钮，中间有一个带有数字的按钮。我正在使用材料。按钮现在是矩形的，对于我的应用程序来说太大了。我的问题是我不能让它们变成正方形并调整它们的大小。我已经尝试了很多东西，但它不起作用。谢谢

     <Grid item>
        <Button onClick={this.up} variant="outlined">
          <Add color="secondary" />
        </Button>
        <Button style={{ padding: "11px 0px" }} variant="outlined">
          {this.state.quantity < 1 ? 0 : this.state.quantity}
        </Button>
        <Button onClick={this.down} variant="outlined">
          <Remove color="secondary" />
        </Button>
      </Grid>

在使用 material-ui TextField 时，我希望 TextField 是裸露的（没有下划线）。我确实知道使用 material-ui 中的 InputBase 可以实现这一点，但我有点需要使用 TextField API 来实现这一点，但我没有在 API 指南中找到这样做的方法。