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