reactjs - React Material-UI 和颜色：警告

Question

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

我正在尝试制作一个带有color='warning'的按钮，该按钮在我的调色板中定义，如下所示（主题有效，我可以使用原色和次要颜色）：

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

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

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

谢谢！

标签： reactjscolorsmaterial-uiuicolorcolor-scheme

Answer 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>
  );
}