React Material-UI 和颜色：警告答案

【问题标题】：React Material-UI and color: warningReact Material-UI 和颜色：警告
【发布时间】：2023-03-10 13:46:02
【问题描述】：

我是 React 和 MUI 的新手，也许我只是遗漏了一些东西。

我正在尝试使用在我的调色板中定义的 color='warning' 按钮（主题有效，我可以使用主要颜色和次要颜色）：

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#70B657'
    },
    secondary: {
      light: '#2face3',
      main: '#4199D8',
      contrastText: '#ffcc00'
    },
    warning: {
      main: '#BC211D'
    }
  }
});

我在文档中注意到<Button> color prop 只需要default|inherit|primary|secondary，所以不可能像那样使用它。那么在 Material-UI 中使用警告颜色按钮的正确或最佳做法是什么？我认为这是一个基本的事情，应该很容易实现..??

最好是一种不涉及制作多个不同主题并在需要时导入它们的解决方案。

谢谢！

【问题讨论】：

标签： reactjs colors material-ui uicolor color-scheme

【解决方案1】：

用法：

const useStyles = makeStyles(theme => ({
  root: {
    color: theme.palette.warning.main
  }
}));

完整代码：

import React from "react";
import "./styles.css";
import { Button } from "@material-ui/core";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    color: theme.palette.warning.main
  }
}));
function YourComponent() {
  const classes = useStyles();
  return (
    <div className="App">
      <Button variant="contained" classes={{ root: classes.root }}>
        Secondary
      </Button>
    </div>
  );
}

const theme = createMuiTheme({
  palette: {
    warning: { main: "#FFFFFF" }
  }
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <YourComponent />
    </ThemeProvider>
  );
}

更新

将 props 传递给 makeStyles

import React from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = props =>
  makeStyles(theme => ({
    root: {
      color: props.value === "111" ? "red" : "blue"
    }
  }));
const Comp = props => {
  const classes = useStyles(props)();
  return <input defaultValue={props.value} className={classes.root} />;
};
export default function App() {
  return (
    <div className="App">
      <div>
        <Comp value={"111"} />
      </div>
      <div>
        <Comp value={"222"} />
      </div>
    </div>
  );
}

【讨论】：

好的，所以你在这里使用一个类来设置它的样式。例如，当按钮被禁用时呢？使用 color prop 时，它会在需要时处理较浅的颜色等，
@Mulperi using a class 是 MUI 中建议的样式实现，对于您的进一步问题，请参阅本文的更新部分
@Mulperi 这篇文章有帮助吗？请提供一些反馈将不胜感激。
我想知道一个组件更全面地使用主题的调色板和功能的方法，而不仅仅是一种解决方法。不过还是谢谢！

【解决方案2】：

是的，我不明白为什么第一个示例可以工作，而第二个不可以。

应用组件

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#bed000',
    },
    secondary: {
      main: '#110b36',
    },
    error: {
      main: '#B33A3A',
    },
},
})


<MuiThemeProvider theme={theme}>
            <Route exact path="/" component={LoginView} />

</MuiThemeProvider>


<LoginView>
<TextField
autoFocus 
label="Contraseña"
name="Password" 
 type="Password"
value={values.Password}
onChange={handleChange}
onBlur={handleBlur}
fullWidth
color={touched.Password && errors.Password ? "primary" : "secondary"}
/>
<TextField
autoFocus 
label="Contraseña"
name="Password" 
 type="Password"
value={values.Password}
onChange={handleChange}
onBlur={handleBlur}
fullWidth
color={touched.Password && errors.Password ? "error" : "secondary"}
/>

</LoginView>

【讨论】：