相关疑难解决方法(0)

我正在使用 Material UI v5 和 TypeScript 为应用程序设置基础。我想使用一些添加到现有默认属性的自定义属性来扩展 Material UI 主题。

我的 theme.ts 配置如下所示：

import { createTheme, ThemeOptions } from "@mui/material/styles";

interface IThemeOptions extends ThemeOptions {}

export const themeStyles = {
    palette: {...},
    breakpoints: {...},
    typography: {
        h1: {...},
        h2: {...},
        h3: {...},
        h4: {...},
        h5: {...}
        h6: {...},
        button: {...},
        body1: {...},
        body2: {...},
        //this is the custom prop I want to add
        h1Bold: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontWeight: 700,
            fontSize: "3.3125rem",
            lineHeight: "1.15em",
            color: "#1D1D1D",
            marginTop: "20px", …

我对 Material UI 很陌生，我正在尝试使用这样的文本颜色设置排版：

const theme = createMuiTheme({
  palette: {
    text:{
      primary: "#FFFFFF"
    }
  }
});

const WhiteText = (props: { text:string, varient: Variant | 'inherit'}) => {
  return <ThemeProvider theme={theme}>
      <Typography variant={props.varient} align="center" color="textPrimary">{props.text}</Typography>
  </ThemeProvider>
}
...
<WhiteText varient="h3" text="This text should be white"/>

但文本不会改变颜色：/

我应用主题错了吗？

我在我的项目中使用material-ui,并且我在一个黑色背景的div中有一个Checkbox.但它看起来不太好,因为Checkbox也是黑色的.如何将Checkbox的颜色从黑色更改为另一种颜色？

我发现了某种错误或其他问题..仍然不知道。我有一个React应用，material-ui可用作UI。例如，当您导入按钮时，您可以使用primary={true}或更改其颜色secondary={true}。但是，我决定改变primary和secondary颜色。我发现我可以这样做：

const theme = createMuiTheme({
   palette: {
        primary: '#00bcd4',
        secondary: '#ff4081'
      }
    });

然后在这里我可以使用它：

    <MuiThemeProvider theme={theme}>
      <App/>
    </MuiThemeProvider>

但我得到一个错误： createMuiTheme is not a function...

我进入material-ui包装，发现没有这样的文件，当我导入时createMuiTheme我得到了undefined。它应该是从导入的，material-ui/styles/theme但我实际上根本没有此文件夹！

我正在使用material-ui@0.19.4。我将此软件包更新为，v20..并且仍然没有此类文件夹...

怎么知道如何解决这个问题？

我正在努力修改Material-UI @ next(v1)中的按钮颜色.

我如何将muitheme设置为与bootstrap相似,所以我可以使用"btn-danger"表示红色,"btn-success"表示绿色...？

我尝试使用自定义className但它无法正常工作(悬停颜色不会改变),它似乎重复.我有什么选择？

我正在使用 Material-UI React 库，并且我需要TextField在单击或聚焦时更改 a 的边框颜色（视情况而定）。

这是我尝试过的：

const useFormFieldStyles = makeStyles((theme) => ({
  input: {
    borderWidth: '1px',
    fontWeight: 'bold',
    '& .MuiOutlinedInput-input:focused': {
      borderColor: 'green',
    }
  }
}));

然而，borderColor尽管我付出了一切努力，它仍然是蓝色的。

我怎样才能做到这一点？

我在使用最新版本的 Mui 时遇到问题。我正在使用主题更改文本字段输入的默认样式，错误代码与“./node_modules/@mui/material/FormLabel/FormLabel.js/FormLabelRoot<”有关，我有以下依赖项“@emotion/react”：“^11.4.1”，“@emotion/styled”：“^11.3.0”，“@mui/icons-material”：“^5.0.1”，“@mui/material” ：“^5.0.1”，

如果有人有想法，我很想听听:)

import React, { useState } from "react"
import { Button, createTheme, Grid, TextField, Tooltip } from "@mui/material"
import { ThemeProvider } from "@mui/system"
import { AddRounded, CalendarToday, Phone, Email, SearchOutlined, People, Work } from "@mui/icons-material"

import { orange } from "@mui/material/colors"

function App() {
  //logic
  const [contacts, setContacts] = useState([])

  const [addFormData, setAddFormData] = useState({
    name: "", email: "", phone: "", dateCreated: "", area: ""
  })



  /* search reflects the value of the googleesque, search …

该color道具只能接受三个值（默认值，主要值，次要值），但是如果我想让收音机为绿色怎么办？

所以我尝试用classesprop 覆盖如下：

const styles = theme => ({
  radio: {
    colorPrimary: {
    '&$checked': {
      color: 'blue'
    }
  },
  checked: {},
  } 
})

然后在组件内部：

<FormControlLabel
   classes={{root: classes.formControlLabelRoot, label: classes.formControlLabel}}
   value="week"
   control={<Radio disableRipple classes={{colorPrimary: classes.radio}} />}
   label="Every week (Monday at 12:00)"
/>

但这是行不通的。

我越来越

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Palette'.
  No index signature with a parameter of type 'string' was found on type 'Palette'.ts(7053)

尝试使用字符串列表从ThemeProviderMaterial-UI获取主题时

样本是 astring[]并且包含看起来像"primary.light"or的字符串"secondary.dark"

useTheme使用这个文件：

import { createTheme, responsiveFontSizes } from '@mui/material/styles';
    import { deepPurple, amber } from '@mui/material/colors';
    
    // Create a theme instance.
    let theme = createTheme({
      palette: {
        primary: deepPurple,
        secondary: amber,
      },
    });
    
    theme = responsiveFontSizes(theme);
    
    export …