홈>2020-02-01 01:26

css - 미디어 쿼리를 사용하는 MuiTab과 같은 구성 요소 재정의

글꼴 크기를 늘리기 위해 MuiTab에 CSS 재정의를 제공하려고합니다.

material-ui에서 CSS 재정의에 대한 문서를 사용하여 대부분의 요소에 대한 글꼴 크기를 늘 렸지만 미디어 쿼리를 사용하여 재정의를 제공하는 규칙보다 더 구체적인 CSS 규칙을 생성하는 요소에 갇혔습니다. .

theme.ts :

import { createMuiTheme } from '@material-ui/core';
const fontSizeStyle = {
  fontSize: '1rem',
};
const fontFamilyStyle = {
  fontFamily: '"Ubuntu", sans-serif'
};
const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        ...fontFamilyStyle,
        ...fontSizeStyle,
      },
      label: fontSizeStyle,
    },
  }
});
export default theme;

이것은 MuiTab에 적용되는 다음 CSS 규칙을 생성합니다 :

규칙은 다음 파일에 의해 생성됩니다 :

https : //github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tab/Tab.js

[theme.breakpoints.up('md')]: {
  fontSize: theme.typography.pxToRem(13),
},

만든 사람이 createMuiTheme 함수를 사용하여이 미디어 쿼리를 재정의하는 방법에 대한 예가 있습니까? 브레이크 포인트가 없으므로 오버라이드에서 사용할 수 있도록 브레이크 포인트를 지정해야 할 수도 있습니다

친절한 관계

cssmaterial-ui

답변 # 1

다음과 같이 지정하여 해결했습니다 :

   MuiTab: {
      root: {
        minWidth: 0,
        '@media (min-width: 0px)': {
          minWidth: 0
        }
      }
    }

답변 # 2
저도 같은 문제에 직면했습니다. Breakpoints에 대한 문서를 읽고이 상황에 대한 방법을 찾았지만 각 Tab 에서 재정의 된 스타일을 적용해야하기 때문에 다소 추한 것을 발견했습니다. classes 사용 속성.

참고 : createMuiTheme 를 사용하여이 문제에 대한 해결책을 모르겠습니다. 기능

스타일을 breakpoints 에 적용 스타일. 이 경우
```
const styles = theme => ({
  mediaFont:{
    [theme.breakpoints.up('md')]: {
     fontSize:fontSizeStyle.fontSize,
    },
  },
  });
```
위 스타일을 TabLabel 에 적용하십시오.
```
<Tab label="Item One" classes={{label:classes.mediaFont}} />
```
이 작동합니다. 여기에서 데모 샌드 박스를 확인하십시오.
답변 # 3
CSS에는보다 덜 엄격한 규칙을 강제로 적용하는 메커니즘이 있습니다 :! important
```
const fontSizeStyle = {
  fontSize: '1rem !important',
};
```
답변 # 4
다음과 같이 지정하십시오
```
let theme = createMuiTheme({});
theme = {
  ...theme,
  overrides: {
    MuiTab: {
      root: {
        [theme.breakpoints.up("xs")]: {
          minHeight: 10
        }
      }
    }
  }
}
export default theme;
```
theme.breakpoints CSS 미디어 쿼리를 생성하는 4 가지 도우미 메소드를 제공합니다.

theme.breakpoints.up(key)

theme.breakpoints.down(key)

theme.breakpoints.only(key)

theme.breakpoints.between(start, end)

각 key 가있는 곳 중단 점이며 고정 된 화면 너비와 일치합니다. 허용되는 키 값은 xs|sm|md|lg|xl 입니다.

자세한 내용은 material-ui 문서를 참조하십시오

Python2.net

css - 미디어 쿼리를 사용하는 MuiTab과 같은 구성 요소 재정의

관련 자료