Skip to content

Instantly share code, notes, and snippets.

@ashimon83
Created December 4, 2020 12:24
Show Gist options
  • Save ashimon83/979b0939d8aec71ded4ba5d428f1c311 to your computer and use it in GitHub Desktop.
Save ashimon83/979b0939d8aec71ded4ba5d428f1c311 to your computer and use it in GitHub Desktop.
blog202012 styledcomponents
// レイアウトのためのstyled component単体でexportできる
import styled from 'styled-components'
import { Heading } from '../Heading'
export const Section = styled.section`
display: flex;
flex-direction: column;
padding: 16px;
`
// 拡張方法
const Base = styled.div`
background-color: darkgreen;
color: turquoise;
`
const Danger = styled(Base)`
color: red;
`
// 同じスタイリングでも違うタグは別のStyled Componentであり使い回せない
const DangerLine = styled.span`
color: red;
`
const Extended = styled(Base)`
text-decoration: underline;
`
return (
<div>
<Base>This will be turquoise</Base>
<Danger>
some description
</Danger>
<DangerLine>other description</DangerLine>
<Extended>extended</Extended>
</div>
)
// propsの型定義もOK
const Label = styled.span<{size: number}>`
color: blue;
font-size: ${(props) => props.number};
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment