styled-components
with Typescript
styled-componentsはnode_modulesからではなく自作のsrc/Theme/index.tsxから読み込む
他の要素で作成したコンポーネントを別要素として使う
code:ts
const GrayArea = styled.div`
color:white;
`
export default () => <React.Fragment>
// divで作ったが↓ buttonとして使いたい
<GrayArea as='button' onClick={() => alert('It works!')}>
Hello React
</GrayArea>
</React.Fragment>
code:ts
<div
css={`
background: papayawhip;
color: ${props => props.theme.colors.text};
`}
/>k
<Button
css="padding: 0.5em 1em;"
/>