The journey of #100DaysOfCode (@Darine_Tleiss)

About the Community The Treehouse
71

100daysofcode - Day65

Hello friends, the 65th from this amazing 00 days of code is here, and as everyday a lot of new knowledge and fun are gathered by learning some new topics from this amazing e-world :sunglasses::star_struck:.

Today we will discuss an important topic in react, the styling :art:, and it’s different ways.

Inline Styling

  • An inline CSS is used to apply a unique style to a single HTML element . An inline CSS uses the style attribute of an HTML element :face_with_peeking_eye:
  • Example:
    const Header = () => {
      return (
        <>
          <h1 style={{color: "red"}}>Hello Style!</h1>
          <p>Add a little style!</p>
        </>
      );
    }
  • Keep in mind while dealing with inline styles in react we should use the camelCase syntax to write down the properties with hyphen separators, like background-color to be backgroundColor
  • Example:
    const Header = () => {
      return (
        <>
          <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
          <p>Add a little style!</p>
        </>
      );
    }

JavaScript Object :innocent:

  • In react we can create an object with styling information, and refer to it in the style attribute
  • Example:
    const Header = () => {
      const myStyle = {
        color: "white",
        backgroundColor: "DodgerBlue",
        padding: "10px",
        fontFamily: "Sans-Serif"
      };
      return (
        <>
          <h1 style={myStyle}>Hello Style!</h1>
          <p>Add a little style!</p>
        </>
      );
    }

CSS Modules :sunglasses:

  • CSS Modules are convenient for components that are placed in separate files.
  • The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.
  • CSS module are created with the .module.css extension
  • Example
    my-style.module.css:
    
    .bigblue {
      color: DodgerBlue;
      padding: 40px;
      font-family: Sans-Serif;
      text-align: center;
    }

  Car.js:
  import styles from './my-style.module.css'; 
  
  const Car = () => {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
  
  export default Car;
6 Likes