>

글꼴 크기를 늘리기 위해 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 함수를 사용하여이 미디어 쿼리를 재정의하는 방법에 대한 예가 있습니까? 브레이크 포인트가 없으므로 오버라이드에서 사용할 수 있도록 브레이크 포인트를 지정해야 할 수도 있습니다

친절한 관계


  • 답변 # 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 문서를 참조하십시오

관련 자료

  • 이전 jquery - 자바 스크립트에서 키로 필터링
  • 다음 android - 프래그먼트 코 틀린에서 DialogFragment 호출