React

Last Updated: 3/27/2023

Styling

Inline Styles

  • Pass the styles as an object
  • Use camelCase for style property names
<button style={{backgroundColor: "yellow"}}>Click</button>

CSS Files

  • Create new style ListGroup.css
  • Import ./ListGroup.css into ListGroup.tsx

CSS Modules

  • The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.

  • If there is another stylesheet with same class name, clashes happen.

  • In CSS modules all class names are scoped locally which avoids name clashes

  • CSS modules resolve name conflicts issue by generating unique class names during the build process.

  • Create the CSS module with the .module.css. Follow camelCase notation ListGroup.module.css

.listGroup {
	border: 2px  solid  lightblue;
}
  • Import CSS module in the component. All the CSS rules are available as properties in styles object ListGroup.tsx
import styles from "./ListGroup.module.css";
  • Apply the CSS rule
//with camecase class name
<ul className={styles.listGroup}>

//with kebabcase class name
<ul className={styels["list-group"]}>

Multiple classes

<ul className={["list-group", styles.listGroup].join(" ")}>
  • Bootstrap
  • Material UI - based on Google Material Design
  • Tailwind CSS - Utility first CSS library
    • Chakra UI
    • Daisy UI

Adding Icons

import { BsFillCalendarDateFill } from "react-icons/bs";
  • Specify size and color
<BsFillCalendarDateFill size="100" color="red"></BsFillCalendarDateFill>
Previous
Next