MUI에서 원색 및 보조 색상 변경

MUI에서 원색 및 보조 색상 변경

MUI를 이용한 리액트 앱이 있어요.단추를 가져올 때 다음을 사용하여 단추를 설정할 수 있습니다.primary={true}또는secondary={true}를 변경하고 싶다.primary그리고.secondary색채.이렇게 할 수 있다는 것을 알게 되었습니다.

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

여기서 사용할 수 있습니다.

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

하지만 오류가 발생했습니다.createMuiTheme is not a function...

MUI 패키지에 들어가 보니 그런 파일이 없고 Import할 때createMuiTheme, 나는 이해하다undefined수입품입니다.material-ui/styles/theme사실 이 폴더는 전혀 없어요!

사용하고 있었습니다.material-ui@0.19.4이 패키지를 업데이트했습니다.v20어쨌든 아직 그런 폴더는 없어요.

새로운 답변

최신 버전의 머티리얼 UI에서 createMuiTheme는 더 이상 사용되지 않습니다.따라서, 그 대신 우리는 그것을 사용해야 한다.createTheme

import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
import Root from './Root';

// use default theme
// const theme = createTheme();

// Or Create your Own theme:
const theme = createTheme({
  palette: {
    secondary: {
      main: '#E33E7F'
    }
  }
});
    
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Root />
    </MuiThemeProvider>
  );
}
    
render(<App />, document.querySelector('#app'));

구답

https://material-ui.com/customization/themes/ 에서 :

import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Root from './Root';

// use default theme
// const theme = createMuiTheme();

// Or Create your Own theme:
const theme = createMuiTheme({
  palette: {
    secondary: {
      main: '#E33E7F'
    }
  }
});
    
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Root />
    </MuiThemeProvider>
  );
}
    
render(<App />, document.querySelector('#app'));

MuiThemeProvider의 프로펠러 이름에는 다음 두 가지 다른 점이 있습니다.

<MuiThemeProvider muiTheme={muiTheme}>
   <AppBar title="My AppBar" />
</MuiThemeProvider>

함수는 createMuiTheme가 아니라 getMuiTheme입니다.

import getMuiTheme from 'material-ui/styles/getMuiTheme';

업데이트:

패키지에서 라이트 테마를 열면 프라이머리도 세컨더리도 사용하지 않습니다만, 그렇게 해 보시겠습니까?

v1-beta를 문서 권장대로 사용해야 합니다.나 자신도 이러한 문제가 있었고 내가 구식 버전의 MUI를 사용하고 있다는 것을 깨달았다.

npm install material-ui@next

Import:

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

테마를 만듭니다.

const theme = createMuiTheme({
    palette: {
        secondary: {
            main: '#d32f2f'
        }
      },
});

버튼에 적용합니다.

<MuiThemeProvider theme={theme}>
   <Button
     onClick={this.someMethod} 
     variant="raised"
     color="secondary" 
   </Button>
</MuiThemeProvider>

보통 어떤 것이든 손에 넣으면importMUI에 관한 문제는 거의 모든 버전에 문제가 있습니다.

커스텀 컬러를 사용하고 싶은 경우,main객체의 속성.MUI는 이 색상을 사용하여 어둡고 밝으며 대비를 계산합니다.메인 값 이외의 텍스트 값.

• dark,light: 보다 어둡고 밝은 버전의main색.
• contrastText: 배경색이 다음과 같은 경우 텍스트 색상main색.

다음 예시는 다음과 같습니다.

const theme = createTheme({
  palette: {
    primary: {
      main: '#ff0000', // very red
    },
    secondary: {
      main: '#00fff0', // very cyan
    },
  },
});

기본 및 보조 개체에서 다음과 같은 색상 속성을 생성합니다.

const theme = useTheme();
const { main, dark, light, contrastText } = theme.palette.primary;
// same with secondary
// const { main, dark, light, contrastText } = theme.palette.secondary;

색상 객체를 직접 전달하여 MUI 색상을 사용할 수도 있습니다.primary또는secondary소유물.이번에는 MUI가 이 속성을 사용합니다.500(예:amber[500])를 사용하여 기타 3가지 색상을 계산합니다.아래 코드는 다음과 같습니다.

import { amber, deepPurple } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: amber,
    secondary: deepPurple,
  },
});

기본 및 보조 개체에서 다음과 같은 색상 속성을 생성합니다. 전체 색상을 통과하기 때문에 다른 모든 음영도 다음 색에서 생성됩니다.50로.A700작은 부작용으로도 사용할 수 있습니다.

라이브 데모

관련 답변

• 커스텀 MUI 팔레트 색상을 추가하는 방법
• 재료 UI: 컴포넌트 내부의 모든 팔레트 음영에 접근하는 방법

MUI Material v5의 새로운 API는 https://mui.com/material-ui/customization/theming/에서 설명합니다.

import * as React from 'react';
import { red } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});

const App = () => 
  <ThemeProvider theme={theme}>...</ThemeProvider>;

언급URL : https://stackoverflow.com/questions/49535551/change-primary-and-secondary-colors-in-mui