<div class="my-awesome-container">
    <button class="chris">
        Chris!
    </button>
</div>

!important

var()

import React from "react";
import { Image } from "cloudinary-react";
import { cloudName } from "../settings";

const avatarStyle = {
  display: "flex",
  position: "relative",
  alignItems: "center",
  width: "150px",
  height: "150px"
};

const Avatar = props => {
  return (
    <div style={avatarStyle}>
      <Image
        cloudName={cloudName}
        publicId={props.publicId}
        alt={props.title}
        width={150}
        height={150}
        crop="thumb"
        radius="max"
        opacity={50}
      />
    </div>
  );
};

export default Avatar;

//...
/* style of container */
const avatarStyle = {
  /*...*/
};

/* style of avatar initials */
const titleStyle = {
  position: "absolute",
  display: "flex",
  fontSize: "40px",
  width: "inherit",
  alignItems: "center",
  justifyContent: "center"
};

const Avatar = props => {
  return (
    <div style={avatarStyle}>
      <Image
        cloudName={cloudName}
        publicId={props.publicId}
        alt={props.title}
        width={150}
        height={150}
        crop="thumb"
        radius="max"
        opacity={50}
      />
      <div style={titleStyle}>
        {props.title[0].toUpperCase()}
      </div>
    </div>
  );
};
//...

import "./button.css";

//will become

import styles from "./button.css";

/* button.css */

:local(.button) {
/* by default */
/*...*/
}

//is the same as
.button { /*...*/ }

/*Item.module.css*/
.itemCard {
  width: 220px;
  padding: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  border: 1px solid lightgray;
}

.itemCard:hover {
  background-color: #d3d3d363;
  cursor: pointer;
}

.itemTitle {
  color: rebeccapurple;
  margin: 0;
  padding: 0.8rem 0;
  border-top: 1px solid lightgray;
}

/*Item.js*/
import React from "react";
import { Image } from "cloudinary-react";
import { cloudName } from "../../settings";
import styles from "./Item.module.css";

const Item = props => {
  return (
    <div className={styles.itemCard}>
      <Image
        cloudName={cloudName}
        publicId={props.id}
        width="200"
        crop="scale"
      />
      <h3 className={styles.itemTitle}>
        {props.title}
      </h3>
    </div>
  );
};

export default Item;

npm install node-sass --save

/*Item.module.scss*/
.itemCard {
  width: 220px;
  padding: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  border: 1px solid lightgray;

  &:hover {
    background-color: #d3d3d363;
    cursor: pointer;
  }
}

.itemTitle {
  color: rebeccapurple;
  margin: 0;
  padding: 0.8rem 0;
  border-top: 1px solid lightgray;
}

/* Item.js */
import React from "react";
import { Image } from "cloudinary-react";
import { cloudName } from "../../settings";
import styles from "./Item.module.scss";

const Item = props => {
  return (
    <div 
        className={props.isGrid 
            ? styles.itemCard 
            : styles.itemRow}>
      <Image
        cloudName={cloudName}
        publicId={props.id}
        width={props.isGrid ? "200" : ""}
        height={props.isGrid ? "" : "60"}
        crop="scale"
      />
      <h3 className={styles.itemTitle}>
        {props.title}
      </h3>
    </div>
  );
};

export default Item;

/* Item.module.scss */
.item{
  border: 1px solid lightgray;
  padding: 5px;

  &:hover {
    background-color: #d3d3d363;
    cursor: pointer;
  }
}

.itemCard {
  composes: item;
  width: 220px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.itemRow {
  composes: item;
  min-height: 60px;
  display: flex;

  .itemTitle {
    border:none;
    font-size: 18px;
    margin-left: 10px;
    line-height: 2;
  }
}

/* .css */
.container {...}

/* will be mapped to */

<div 
    class="elements__Container-l1fwko0zmfBG">
    ...
</div>

/* Item.js */
import styled, {css} from "styled-components";

const rowStyle = css`
    /* styles for row view */
`;

const cardStyle = css`
    /* styles for card view */
`;

const ItemContainer = styled.div`
    /* default styles*/
    
    ${props => props.isGrid 
             ? rowStyle : cardStyle}
`;

const Item = props => {
  return (
    <ItemContainer isGrid={props.isGrid}>
      <Image
        /*...*/
      />
      <ItemTitle>{props.title}</ItemTitle>
    </ItemContainer>
  );
};

/* Item.js */
import styled from "@emotion/styled";

const ItemContainer = styled.div(
  `
  /* default styles */
`,
  props =>
    props.isGrid
      ? {
          /* card styles */
        }
      : {
          /* row styles */
        }
);

const Item = props => {
  return (
    <ItemContainer isGrid={props.isGrid}>
      <Image
        /*...*/
      />
      <ItemTitle>{props.title}</ItemTitle>
    </ItemContainer>
  );
};

/* Item.js */
import styled from "styled-components";

const Item = props => {
  return (
    <ItemContainer isGrid={props.isGrid}>
      <Image
        /*...*/
      />
      <ItemTitle>{props.title}</ItemTitle>
    </ItemContainer>
  );
};

const ExtendedItem = styled(Item)`
    /* extended styled*/
`

/*index.js*/

import { ThemeProvider } from "emotion-theming";

function App() {
  const [theme, changeTheme] = useState({
    color: "rebeccapurple"
  });

  return (
    <StyledApp>
      <h1>The Pokemons</h1>
      <select
        defaultValue={theme.color}
        onChange={e => changeTheme({ 
            color: e.target.value
          })}
      >
        <option value="orange">Orange</option>
        <option value="lime">Lime</option>
        <option value="pink">Pink</option>
        <option value="yellow">Yellow</option>
        <option value="rebeccapurple">Purple</option>
      </select>
      <ThemeProvider theme={theme}>
        <StyledLayout />
      </ThemeProvider>
    </StyledApp>
  );
}

/*Item.js*/
const ItemTitle = styled.h3`
  color: ${props => props.theme.color};
  //...
`;