Re:Styled Components v3.0.0
by mephitix on Tuesday January 23, 2018 @12:45PM
(#16215494)
1) I can directly style multiple components within a file, each having their own style.
2) Since it's in javascript, I can reference JS variables within the file. I can derive CSS values from props passed into the component: styled.div`color: ${props => props.userColor}`
3) I can extend other styled components' styles - i have a small shared library of central components like buttons, inputs. I can extend those: styled(MyThemedButton)`color: ${props => props.specialColor}`
4) I can use awesome micro-libraries like styled-system to add parameterization to the JSX elements: const Foo = styled.div`${space}`. ... <Foo key='1' mx={1} my={2} />... <Foo key='2' mx={2} my={3} />
5) I can change the style of every single styled component with a ThemeProvider. styled.div`color: ${props => props.theme.headerColor}`
6) I can see everything related to the component in one single file.
2) Since it's in javascript, I can reference JS variables within the file. I can derive CSS values from props passed into the component: styled.div`color: ${props => props.userColor}`
3) I can extend other styled components' styles - i have a small shared library of central components like buttons, inputs. I can extend those: styled(MyThemedButton)`color: ${props => props.specialColor}`
4) I can use awesome micro-libraries like styled-system to add parameterization to the JSX elements: const Foo = styled.div`${space}`. ... <Foo key='1' mx={1} my={2} />... <Foo key='2' mx={2} my={3} />
5) I can change the style of every single styled component with a ThemeProvider. styled.div`color: ${props => props.theme.headerColor}`
6) I can see everything related to the component in one single file.