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

Link

https://stackoverflow.com/questions/50867449/is-there-a-way-i-can-overwrite-the-colour-the-material-ui-icons-npm-package-prov

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

why?

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

or

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>
</StyledContentsBox>