material-ui 아이콘버튼에서 SVG 아이콘을 확대하는 방법
react.js와 Material UI 라이브러리를 사용하여 웹 페이지를 구축한 적이 있습니까?아이콘 크기를 어떻게 조정해야 합니까?이것은 svg 아이콘입니다.방금 '새로 만들기' 컴포넌트를 만들었습니다.이것은 맨 위에 콘텐츠 추가 버튼이 있는 재료 종이입니다.여기 암호가 있습니다.
import React from 'react';
import Paper from 'material-ui/lib/paper';
import ContentAdd from 'material-ui/lib/svg-icons/content/add';
import IconButton from 'material-ui/lib/icon-button';
const styleForPaper = {
width: '96vw',
height: '20vh',
margin: 20,
textAlign: 'center',
display: 'inline-block',
};
const styleForButton = {
'marginTop': '7vh',
};
const PaperToAddNewWidgets = () => (
<div>
<Paper style={styleForPaper} zDepth={2}>
<IconButton
style={styleForButton}
touch={true}
tooltip="Add New Widget">
<ContentAdd/>
</IconButton>
</Paper>
</div>
);
export default PaperToAddNewWidgets;보기에는 문제가 없지만(풀사이즈로 표시해야 함) 아이콘이 너무 작습니다.그리고 크롬 개발 도구를 열어보니 다음과 같은 HTML 코드가 보였다.
<div style="background-color:#ffffff;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;box-sizing:border-box;font-family:Roboto, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 10px rgba(0,0,0,0.16),
0 3px 10px rgba(0,0,0,0.23);border-radius:2px;width:96vw;height:20vh;margin:20px;text-align:center;display:inline-block;mui-prepared:;" data-reactid=".0.2.0.1.0"><button style="border:10px;background:none;box-sizing:border-box;display:inline-block;font:inherit;font-family:Roboto, sans-serif;tap-highlight-color:rgba(0, 0, 0, 0);cursor:pointer;text-decoration:none;outline:none;transform:translate3d(0, 0, 0);position:relative;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;padding:12px;width:48px;height:48px;font-size:0;margin-top:7vh;mui-prepared:;-webkit-appearance:button;" tabindex="0" type="button" data-reactid=".0.2.0.1.0.0"><div data-reactid=".0.2.0.1.0.0.0"><span style="height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.0"></span><div style="position: absolute; font-family: Roboto, sans-serif; font-size: 14px; line-height: 32px; padding: 0px 16px; z-index: 3000; color: rgb(255, 255, 255); overflow: hidden; top: -10000px; border-radius: 2px; opacity: 0; left: -44px; transition: top 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; -webkit-user-select: none;" data-reactid=".0.2.0.1.0.0.0.1:0"><div style="position: absolute; left: 50%; top: 0px; transform: translate(-50%, -50%); border-radius: 50%; transition: width 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, height 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, backgroundColor 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 0px; height: 0px; background-color: transparent;" data-reactid=".0.2.0.1.0.0.0.1:0.0"></div><span style="position:relative;white-space:nowrap;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.1:0.1">Add New Widget</span></div><svg style="display:inline-block;height:24px;width:24px;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;fill:rgba(0, 0, 0, 0.87);mui-prepared:;-webkit-user-select:none;" viewBox="0 0 24 24" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10.0"></path></svg></div></button></div>Chrome dev 툴을 사용하여 svg 아이콘 크기와 svg 뷰박스 속성을 수정하여 브라우저에서 아이콘을 크게 만들었습니다.하지만 코드의 아이콘 크기를 어떻게 조정해야 할지 모르겠어요.svg를 수정하기 위해 CSS 파일을 작성할 경우 svg 요소가 여러 개 있으면 문제가 발생합니다.
이것을 하다
<SomeIcon className="svg_icons"/>
.svg_icons {
transform: scale(1.8);
}
스케일만 사용 : D it actuccess
참고: IconButton Material UI에서는 iconStyle Prople이 지원되지 않으므로 이 답변은 더 이상 사용되지 않습니다.
를 설정해야 .iconStyle을 대다<IconButton>material-ui 문서의 예는 다음과 같습니다.
제 경험으로는 높이나 폭만 설정하면 아무 일도 일어나지 않고 높이와 폭을 같은 값으로 설정하면 되는 것 같습니다.
import React from 'react';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';
const styles = {
largeIcon: {
width: 60,
height: 60,
},
};
const IconButtonExampleSize = () => (
<div>
<IconButton
iconStyle={styles.largeIcon}
>
<ActionHome />
</IconButton>
</div>
);
아니요. 다른 답변의 대부분은 불만족스럽고 적어도 2021년에는 좋지 않은 관행입니다.이 답변은 여기 매뉴얼에 기재되어 있기 때문에 CSS의 해크는 필요 없습니다.
Button ★★★★★★★★★★★★★★★★★」IconButton으로 아이를 입니다.Icon의 요소<a> ★★★★★★★★★★★★★★★★★」<Link> (contractions) 요 ( 。그들은 크기에 대한 어떠한 본질적인 통제도 가지고 있지 않다.버튼 크기를 버튼 만 하면 됩니다.Icon의 IconButtonfontSize 으로 커집니다그러면 버튼이 자동으로 커집니다.
를 들면, 예음음, 음음음음 the the the the를 때,IconButton[ ] [ 래 、 [ 。
<IconButton>
<Icon />
</IconButton>
'만 늘리면 요.Icon이를직직직직낳
<IconButton>
<Icon fontSize="large" />
</IconButton>
은 you, 이, 이, 이로 지정할 수 입니다.fontSize더 , CSS 를 설정할 .font-size이치노
<IconButton>
<Icon style={{ fontSize: 60 }} />
</IconButton>
심플하게
:로든 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」Button에는 '''가 .size크기를 조절할 수 있는 특성입니다만,IconButton이치노MUI - MUI - MUI - MUI - MUI - MUI - MUI - MUI - MUI 。
이전 React 버전(현재는 v16.13.1)과 Material-ui(현재는 v4.9.14)를 사용하면서 동일한 문제에 직면했습니다.
어떻게 해결했지?
아이콘 버튼에 이 스타일을 추가하는 것만으로
MyIconButton: {
'& svg': {
fontSize: theSizeIWant
}
}
완전한 예
import React from "react";
import { makeStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
const useStyles = makeStyles((theme) => ({
deleteIcon1: {
'& svg': {
fontSize: 25
}
},
deleteIcon2: {
'& svg': {
fontSize: 50
}
},
deleteIcon3: {
'& svg': {
fontSize: 75
}
},
deleteIcon4: {
'& svg': {
fontSize: 100
}
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<h1>fontSize: 25</h1>
<IconButton className={classes.deleteIcon1}>
<DeleteIcon />
</IconButton>
<h1>fontSize: 50</h1>
<IconButton className={classes.deleteIcon2}>
<DeleteIcon />
</IconButton>
<h1>fontSize: 75</h1>
<IconButton className={classes.deleteIcon3}>
<DeleteIcon />
</IconButton>
<h1>fontSize: 100</h1>
<IconButton className={classes.deleteIcon4}>
<DeleteIcon />
</IconButton>
</div>
);
}
결과는 다음과 같습니다.
라이브 실행 코드
이게 도움이 됐으면 좋겠네요!
material-ui의 최신 버전(3.1.0)에서는 IconButton의 패딩과 SvgIcon의 fontSize를 변경하여 모양을 업데이트할 수 있습니다.
const styles = theme => ({
smallButton: {
padding: 6
},
largeButton: {
padding: 24
},
largeIcon: {
fontSize: "3em"
},
input: {
display: "none"
}
});
function IconButtons(props) {
const { classes } = props;
return (
<div>
<IconButton className={classes.smallButton} aria-label="Delete">
<DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="Delete">
<DeleteIcon fontSize="large" />
</IconButton>
<IconButton className={classes.largeButton} aria-label="Delete">
<DeleteIcon className={classes.largeIcon} />
</IconButton>
</div>
);
}
IconButton 요소의 하위 노드(예: ContentAdd 노드)에서 fontSize 속성을 사용할 수 있습니다.
<IconButton
style={styleForButton}
touch={true}
tooltip="Add New Widget">
<ContentAdd fontSize="large" />
</IconButton>
inherit, default, small, large의 4가지 옵션을 사용할 수 있습니다.
출처 - https://material-ui.com/api/icon/ #http://filename
font Size="large"로 동작했습니다.
<Badge badgeContent={4} color="primary" >
<CameraAltIcon fontSize="large" />
</Badge>
look frops --> 폰트 사이즈
https://material-ui.com/api/icon/
글로벌 프로젝트에 필요한 경우 MUI 테마에 새로운 변형을 추가할 수 있습니다.
components: {
MuiSvgIcon: {
variants: [
{
props: { fontSize: 'huge' },
style: {
fontSize: '5rem',
},
},
],
},
}
TS에서 동작시키려면 모듈 선언을 확장해야 할 수 있습니다.
declare module '@mui/material/SvgIcon' {
interface SvgIconPropsSizeOverrides {
huge: true;
}
}
사용방법:
<HomeIcon fontSize="huge" />
저도 dev.to에 작은 글을 올렸습니다.
에는 'MUI(v5.8.5)'가 .fontSize'중간큰 등 다양한 '작음', '중간', '크다' 등의 을 할 수
<HomeIcon fontSize="small" />
이러한 세트 크기 중 하나가 사용자의 요구에 맞지 않는 경우, 컨테이너의 글꼴 크기와 일치하고 별도의 크기를 가지지 않으려면 '상속'을 사용할 수도 있습니다.
마지막으로는 '어울리다'를 할 수 요.sx하고 그 에서 MUI를 .fontSize아이콘에 직접 크기를 설정할 수 있는 속성입니다.§:
<WhatshotIcon sx={{ fontSize: 140 }} />
https://mui.com/material-ui/icons/ # 사이즈
svg를 확대하는 방법에는 두 가지가 있습니다. 하나는 스타일을 iconStyle로 덮어쓰는 방법이고 다른 하나는 https://github.com/callemall/material-ui/blob/master/src/SvgIcon/SvgIcon.js에 있는 코드를 편집하는 방법입니다.
★★★★★★ContentAdd.SvgIcon
const mergedStyles = Object.assign({
..
height: 24, // <-- change default height
width: 24, // <-- change default width
..
}, style);
return (
<svg
{...other}
..
style={prepareStyles(mergedStyles)}
..
>
Icon Style 소품을 사용하여 svg 아이콘 크기를 변경합니다.
<IconButton
tooltip="Add New Group"
tooltipPosition="top-center"
style={{padding: 0, height: 0}}
iconStyle={{height: 31, width: 48}}
onClick={e => this.openNewList()}
disabled={!this.state.newAvailable}>
<ActionHome />
</IconButton>
항상 간단한 일이 있다.
material ui 아이콘에 클래스 이름을 붙입니다.그리고 css 파일로 가서
height:40px !important and width 40px !impoetant
className={class.classname}, 글꼴 크기: '40px', 크기= '대' 등이 작동하지 않는 경우 인라인 스타일링을 시도하면 필요에 따라 높이와 너비 크기를 지정할 수 있습니다.
<OpenInNewIcon style={{ height: '18px', width: '18px' }} />
잘 됐으면 좋겠는데
사용하여 크기 조정
fontSize<Box sx={{ fontSize: '2rem' }}> <CloseIcon sx={{ fill: 'white', fontSize: 'inherit', mt: 0.375 }} /> </Box>width또는height<Box sx={{ width: '15vw' }}> <CloseIcon sx={{ fill: 'white', width: '100%', height: '100%', mt: 0.375 }} /> </Box>
Sass를 사용하는 경우:
.divWithTargetSVG {
.MuiSvgIcon-root {
font-size: Xrem/px;
}
}
SVG 아이콘 사이즈에 대한 고민은 이렇게 해결했습니다.또한 768 미디어 쿼리 중단점에 도달했을 때 더 작아져야 했습니다.
import { withStyles } from '@material-ui/core/styles';
import { TextField, IconButton } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
const StyledCloseIcon = withStyles(theme => ({
root: {
fontSize: 35,
[theme.breakpoints.down('768')]: {
fontSize: 19,
}
},
}))(CloseIcon);
여기서 이렇게 사용:
<StyledTextField
size='small'
fullWidth
id="standard-bare"
variant="outlined"
InputProps={{ endAdornment: (<IconButton size='small'><StyledCloseIcon /></IconButton>), }} />
도움이 됐으면 좋겠는데건배!
언급URL : https://stackoverflow.com/questions/36482126/how-to-enlarge-the-svg-icon-in-material-ui-iconbuttons
'programing' 카테고리의 다른 글
| 리액트스트랩과 리액트 부트스트랩의 차이점은 무엇입니까? (0) | 2023.03.26 |
|---|---|
| Wordpress Tween Header Scroll 모바일 줌인 (0) | 2023.03.26 |
| react native가 ipad의 창을 채우지 않음 (0) | 2023.03.26 |
| javascript fetch를 동기화하는 방법 (0) | 2023.03.26 |
| null로 정의된 'metaDataSourceAdvisor' 빈을 등록할 수 없습니다. (0) | 2023.03.26 |