Установка дополнительных цветов в теме Material UI React - PullRequest
Новая
       6

Установка дополнительных цветов в теме Material UI React

0 голосов
/ 20 декабря 2018

Я пытаюсь найти документацию или пример кода, как я могу указать дополнительные цвета в теме Material UI.

Сейчас у меня следующая конфигурация темы 

const theme = createMuiTheme({
    palette: {
        primary: {
            main: "#B31728"
        },
        secondary: {
            main: "#202833"
        }
    },
    ...

Теперь у меня естьслучай, когда я хочу использовать цвет для успешных операций, таких как 

import { green } from "@material-ui/core/colors";

<Fragment>
    {isVerified ? (
        <VerifiedUser style={{ color: green[500] }} />
    ) : (
        <Error color="primary" />
    )}
</Fragment>

Я хочу установить цвет VerifiedUser Значок таким же образом, как он установлен для Ошибка Значок.Но конфигурация палитры темы имеет только первичные и вторичные намерения.Как я могу установить цвет, скажем, «успех», чтобы я мог передать его как 

<VerifiedUser color="success" />

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Это не так элегантно, как просто сделать color="success", но код ниже позволит вам сделать что-то вроде: 

<SuccessThemeProvider>
  <Button color="primary" variant="contained">
    Success
  </Button>
</SuccessThemeProvider>

Вот пример полного кода: 

import React from "react";
import ReactDOM from "react-dom";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import green from "@material-ui/core/colors/green";
import Button from "@material-ui/core/Button";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#B31728"
    },
    secondary: {
      main: "#202833"
    },
    success: {
      main: green[500],
      contrastText: "#fff"
    }
  }
});
const successThemePalette = { primary: theme.palette.success };
const successTheme = createMuiTheme({ ...theme, palette: successThemePalette });
const SuccessThemeProvider = props => {
  return (
    <MuiThemeProvider theme={successTheme}>{props.children}</MuiThemeProvider>
  );
};
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <div className="App">
        <Button color="primary" variant="contained">
          Primary
        </Button>
        <Button color="secondary" variant="contained">
          Secondary
        </Button>
        <SuccessThemeProvider>
          <Button color="primary" variant="contained">
            Success
          </Button>
        </SuccessThemeProvider>
      </div>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit 3q77qk6xkq

0 голосов
/ 20 декабря 2018

Для Material-UI вы можете назначить inherit primary secondary default цвету, вы можете использовать primary и secondary до createMuiTheme.

.свою тему костюма в компонент, используйте MuiThemeProvider: 

<MuiThemeProvider theme={theme}>
  //your component
</MuiThemeProvider>

Поэтому, если вы хотите создать зеленый компонент темы, вы можете создать тему, а затем использовать MuiThemeProvider, чтобы обернуть ваш компонент.

Пример кода (сгенерировать зеленую кнопку): 

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const theme = createMuiTheme({
  palette: {
    primary: { main: '#00FF00' }
});

function GreenButton() {
  return (
    <MuiThemeProvider theme={theme}>
      <Button color="primary">This is green button</Button>
    </MuiThemeProvider>
  );
}

Далее читайте: Настройте интерфейс материала с вашей темой

...