Monday, April 22, 2019

Week_1_Day_4: Styling in React

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.css sheet in your index.html document - much like standard HTML & CSS.
  • import a style sheet into your index.js document - 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.
If you don't want to read anything about styled-components take the time to watch this instead:
[Video 5: Loading CSS into our React Application]

No comments:

Post a Comment