글꼴 크기를 늘리기 위해 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
-
답변 # 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 문서를 참조하십시오
관련 자료
- javascript - React App에서 스타일 구성 요소와 작동하지 않는 미디어 쿼리
- html - 내 미디어 쿼리가 제대로 작동하지 않는 이유는 무엇입니까?
- css3 - 미디어 쿼리가없는 CSS 그리드?
- reactjs - 스타일이 지정된 컴포넌트를 사용하는 Material-UI의 미디어 쿼리
- html - css - pc 및 전화의 미디어 쿼리
- css - 미디어 쿼리로 HTML의 일부를 비활성화하는 방법은 무엇입니까?
- HTML/CSS 헤더 미디어 쿼리
- html - 다른 화면 크기에 @media 쿼리를 사용하면 제대로 작동하지 않습니다
- 반응 형 디자인/미디어 쿼리/CSS
- css - 믹스 인으로 미디어 쿼리 반환
- 부트 스트랩 또는 앵귤러 재질을 사용한 사용자 정의 미디어 쿼리
- html - 미디어 쿼리로 CSS 낙서를 반응 적으로 만들기
- css - 미디어 쿼리를 사용하여 이미지 교환 및 중앙 정렬
- html - 두 개의 미디어 쿼리에 대해 두 가지 다른 스타일을 사용하는 방법과 두 가지 모두 최대 너비는 동일하지만 1은 최대 높이를 갖는 방법
- css - 서로 재정의하는 미디어 쿼리 - 이상한 상황
- html - CSS 미디어 쿼리가 효과를 표시하지 않음
- css3 - Customcss 파일을 사용하여 CSS에서 미디어 쿼리 제거
- css - 미디어 쿼리가 서로 모순됨
- javascript - Jest 및/또는 Enzyme을 사용하여 React 컴포넌트에서 렌더링 한 스타일 및 미디어 쿼리를 테스트하는 방법
- CSS 미디어 쿼리에서 장치 픽셀 비율 또는 DPR이 다른 DPR 화면에서 작동하지 않습니다
- css - 머티리얼 UI 입력에서 파급 효과를 비활성화하는 방법은 무엇입니까?
- html - Material-UI 내 사용자 정의 한 클래스로 라이브러리 두 클래스 선택기를 재정의하는 방법
- reactjs - 머티리얼 UI makeStyles에서 @supports CSS 규칙을 어떻게 사용할 수 있습니까?
- css - 재료 테이블의 열 너비를 변경하려는 맵 내부의 삼항 연산자 사용
- reactjs - 머티리얼 ui - 글로벌 테마에 대한 여러 css 클래스
- css - React에서 Material-Ui의 라벨 증가 문제
- css - 머티리얼 UI 그리드 요소를 고정하는 방법은 무엇입니까?
다음과 같이 지정하여 해결했습니다 :