Templee_0207_ Customizing Material UI Icon

오범준·2021년 2월 7일

What Do I want to do ?

I have to make this box
Especially, I want to make the "Warning Icon" Below

I made the similar box
But don't know how to set the color of warning sign


Trial 1

It is easy, just add custom color !

<WarningIcon style = {{ marginRight : '2vw', color : '#FF2C54' }} />

It works as below,
I am applyting styles directly into the 'inline'

It 'can' work but !
It 's not recommended


styles applied as 'inline' is 'object'

style = {{ }} 

which means, new style object has to be created every time a browser renders,
it degrades the rendering performance

additionally ,

since 'inline styles' are newly created ,
props get changed , which also rerenders the children componenets


it goes through process in which creation , allocation of variable happens in browser memory , which also degrades the performance

SO ! let's try other way

Trial 2

< Styled components >

import WarningIcon from '@material-ui/icons/Warning';

const StyledWarningIcon = styled(WarningIcon)`
  color : #FF2C54;
  margin-right : 1vw;

<StyledContentsBox >
 <StyledWarningIcon />
  <span>{"마감 2시간 전"}</span>

Dream of being "물빵개" ( Go abroad for Dance and Programming)

0개의 댓글