@material-ui/core/styles 사용해서 export/import global style
styled 사용 중 에러가 발생했다.
error code는 Property 'styledButton' does not exist on type 'JSX.IntrinsicElements'.
온갖 방법을 찾아보았지만 해결되지 않고 있었다. 그러던 중 styledButton을 StyledButton으로 바꾸니 작동하기…시작…
아 이래서 뭐든지 기초가 중요한 것이다.. JSX에 대한 기초가 없어 이런 데서 막히다니..
주의: 컴포넌트의 이름은 항상 대문자로 시작합니다. React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리합니다. 예를 들어
<div />는 HTML div 태그를 나타내지만,<Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 합니다.
참고 : https://ko.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
// styled.tsx 에 여러 컴포넌트에서 사용할 스타일 정의하기
import { styled } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
export const StyledButton = styled(Button)({
width: '100%',
cursor: 'pointer',
})
//////////////////////////////////////////////////
// otherFile.tsx 에서 styled.tsx에 정의한 StyledButton import 해서 사용하기
import { StyledButton } from './styled'
<StyledButton>선택하기</StyledButton>Material UI 문법
// 1. Styled components API - styled
import { styled } from '@material-ui/core/styles'
const Notice = styled('div')({
backgroundColor: '#f5f5f5',
'.header': {
padding: '14px 10px 10px',
lineHeight: 1.29,
},
'.header strong': {
display: 'block',
},
})
export default function StyledComponents() {
return <Notice>Styled Components</Notice>;
}
//////////////////////////////////////////////////
// 2. Hook API - makeStyles
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
},
});
export default function Hook() {
const classes = useStyles();
return <Button className={classes.root}>Hook</Button>;
}