09/3 Day 27 Lecture Notes

[Limlight86]

09/3 Day 27 Lecture Notes

Step one: don't write bugs haha, but seriously:

Styled-Components

• The goal of styled components is to write CSS on an on component basis as opposed to make it all global. This way we minimize styling errors and are able to keep the code in one place for easy accessibility. https://styled-components.com/

const Button = styled.a`
  /* This renders the buttons above.*/
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: black;
  `}

• To add dependency - yarn add styled-components

• Suggested added dev dependency for styled components: yarn add -D babel-plugin-styled-components

• A styled component can basically replace html elements, like divs and sections with specific components that will include all the written styles.

• Like other components these can be created in their own files and be imported where used.

• Bring in the library to your file: import styled from “styled-components”

import styled from "styled-components";
import styles from "../../styles";

export const MenuHeroText = styled.div`
  font-family: blockpro, sans-serif;
  background-color: ${styles.color.darkGray};
  color: ${styles.color.white};
  position: absolute;
  top: 8rem;
  left: 0;
  right: 0;
  font-size: 4rem;
  z-index: -1;
  height: 12rem;
  padding: 2rem 0 0 0;
`;

export const BackToMainMenuButton = styled.button`
  display: none;

  #categories.carousel ~ & {
    display: block;
    position: relative;
    top: 11rem;
    left: 7rem;
    background-color: ${styles.color.white};
    color: ${styles.color.primary};
    font-family: blockpro;
    border-radius: 2rem;
    border: 2px solid ${styles.color.primary};
    text-transform: uppercase;
    font-size: 1rem;
  }
`;

export const MainElement = styled.main`
  position: relative;
  top: 6rem;
  margin: 0;
`;

Note that it is possible to create variables for commonly used CSS property values so that they can be quickly identified and reused in your code.

export default {
  color: {
    primary: "#be5a07",
    darkGray: "#323231",
    white: "white",
  },
};

By declaring all of these styled components, we are basically creating the ability to replace default html elements. In the above example we created a <div> a <button> and a <main>. We can then bring them into out Main component and use them to replace default html and not need to state their CSS styles in a css file.

  return (
    <>
      <MenuHeroText>{siteSettings.menuHeroText}</MenuHeroText>
      <MainElement>
        <Categories
          selectedCategory={selectedCategory}
          categories={categories}
          handleCategorySelect={handleCategorySelect}
        />
        <BackToMainMenuButton onClick={() => setSelectedCategory("")}>
          &#60; Main Menu
        </BackToMainMenuButton>
        <Products filteredProducts={filteredProducts} />
      </MainElement>
    </>
  );

CSS specitivity cheat sheet : http://www.standardista.com/wp-content/uploads/2012/01/specificity3.pdf