모든 MUI 컴포넌트에 대해 박스 섀도를 글로벌하게 디세블로 하려면 어떻게 해야 합니까?

모든 MUI 컴포넌트에 대해 박스 섀도를 글로벌하게 디세블로 하려면 어떻게 해야 합니까?

기본값을 비활성화해야 합니다.box-shadow대부분의 MUI 컴포넌트에 사용됩니다.지금은 각 컴포넌트의 스타일을 다음과 같이 수동으로 설정하고 있습니다.

<FloatingActionButton style={{boxShadow: "none"}} />

테마 설정을 사용하여 글로벌하게 이 작업을 수행할 수 있는 방법이 있습니까?

다음과 같이 컴포넌트별로 실행할 수 있습니다.

<AppBar elevation={0} />

material-ui 테마의 설정 객체에서는shadows당신의 코드로 덮어쓰고 그냥 놔둬요none값, 나머지를 모두 제거합니다.

코드는 다음과 같습니다.

const theme = createMuiTheme({
  shadows: ["none"]
});

모든 섀도 박스가 어플리케이션에서 완전히 삭제됩니다.

P/s: 이 구성은 버전용입니다.1.0.0-beta.8이 버전에는 몇 가지 변경 사항이 있기 때문에 여기에 주의해 주십시오.

TypeScript에는 다음 항목을 사용합니다.

import { createMuiTheme } from "@material-ui/core/styles"
import { Shadows } from "@material-ui/core/styles/shadows"

const theme = createMuiTheme({
  shadows: Array(25).fill("none") as Shadows,
})

MUI v5 업데이트

섀도우를 글로벌하게 디세블로 하려면 , 의 모든 섀도우치를 리셋 할 필요가 있습니다.shadows로 배열하다.none:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import shadows, { Shadows } from '@mui/material/styles/shadows';

const theme = createTheme({
  shadows: shadows.map(() => 'none') as Shadows,
});

설정만 하면 됩니다.zDepthShadows사용자 정의 테마를 만들거나 테마를 가져올 때 재정의하여 테마에서 '없음'을 선택합니다.

사용하다<FloatingActionButton style={{boxShadow: "none"}} elevation={0} />나한테는 통했어실제로 아래와 같이 Menu에 적용하였습니다.

<Menu
    id="indMenu"
    onClose={handleIndustryMenuClose}
    anchorEl={anchorEL}
    open={Boolean(anchorEL)}
    className={classes.ndmenu}
    elevation={0}
    style={{
      marginTop: "3.5em",
      // boxShadow:"none"
    }}
  >

편집: 이 솔루션은 "MUI: 제공된 표고를 테마에서 사용할 수 없습니다.꼭 확인해 주세요theme.shadows[24]정의되어 있습니다.그래서 아마 최선의 선택은 아닐 겁니다

사용자 지정 테마 개체에서shadows: "none":

import { createTheme } from "@mui/material/styles";
    
const theme = createTheme({
  shadows: "none"
});

create와 함께 사용하여 글로벌 스타일 재정의를 적용할 수 있습니다.테마 함수

const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps:{
        disableElevation: true
      }
    },
    overwrite other components...
  }
})

그림자 추가만 하면 된다="없음", 하나의 테마에 대해서는 그림자를, 다른 테마에 대해서는 그림자를 사용하지 않는 것도 고려할 수 있습니다.

const lightTheme = createTheme({
   palette: {
      mode: "light",
      pallete:{
      ...
      },
   },
   shadows:"none",
})

const darkTheme= createTheme({
   palette: {
      mode: "dark",
      pallete:{
      ...
      },
   },
})

다음으로 Theme Provider에서

 <ThemeProvider theme={darkModeActive ? darkTheme : lightTheme}>
     <App/>
 </ThemeProvider>

(Nextjs에서도 작업 검색!)

나이스! 성공을 위해 고도={0}을(를) 추가합니다.=)

언급URL : https://stackoverflow.com/questions/34550593/how-to-disable-box-shadow-globally-for-all-mui-components