Day 4: Styling in React
There are plenty of options (and opinions) on how CSS should be loaded into React applications. A couple of these options are:
- Reference a
style.csssheet in yourindex.htmldocument - much like standard HTML & CSS. - import a style sheet into your
index.jsdocument - hybrid option:import './css/style.css'; - Create a CSS sheet for each component that only includes the CSS for that single component. This allows greater control over the component styling. e.g.
import './css/store-picker.css'; - Inline styling using JSX formatting.
The method that you choose will depend on the project that you're working on, the current practices and the complexity of the project.
This question sparked a big conversation in my office around why we use 'styled-components' and how this has impacted our development style. It was a great learning opportunity and I have found it is a handy concept to explore not just how but why we do things a certain way.
Usage Notes: Our team just upgraded to using
prettier 0.34.0 in-house. It beautifies the CSS in styled components now. Top notch addition.
Also, the package
language-babel has proper syntax highlighting for styled-components in Atom.
The rest of today's 30 minutes was spent reading about styled-components:
https://github.com/styled-components/styled-components
https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/
https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55
https://github.com/styled-components/styled-components
https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/
https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55
If you don't want to read anything about styled-components take the time to watch this instead:
https://www.youtube.com/watch?v=bIK2NwoK9xk
https://www.youtube.com/watch?v=bIK2NwoK9xk
[Video 5: Loading CSS into our React Application]
.gif)
0 Comments