React Material-UI и цвет: предупреждение - PullRequest
Новая
       42

React Material-UI и цвет: предупреждение

0 голосов
/ 06 апреля 2020

Я новичок в React и MUI и, возможно, я что-то упустил.

Я пытаюсь создать кнопку с color = 'warning' , которая определена в моей палитре следующим образом (тема работает, и я могу использовать основной и дополнительный цвета): 

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

В документации я заметил, что цветовая пропелла <Button> занимает только default|inherit|primary|secondary, поэтому использовать ее таким образом невозможно. Так, как ПРАВИЛЬНО или лучше всего использовать предупреждающую цветную кнопку в Material-UI? Я думаю, что это базовая c вещь, и ее должно быть довольно легко достичь .. ??

Желательно решение, которое не включает создание нескольких различных тем и их импорт при необходимости.

Спасибо!

1 Ответ

1 голос
/ 06 апреля 2020

Использование: 

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

Edit fervent-firefly-d68p0

Обновление

Передача реквизита 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>
  );
}
...