React – How to use css in React project?

Basic

How to import css as module?

• Create css with name as “Button.module.css”
• Then, you can import css into jsx as below

import styles from 'Button.module.css'

<div className={`tooltip bg-grey-33 mt-1 ${styles.shadow}`}>...</div>

.shadow {
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  box-shadow: 0 0 5px #888;
}

How to import css into typescript file?

• Create css with name as “a-css-file.css”
• Import this css file in tsx file as below

require('./a-css-file.css')

// then, you can use css class without caring about styles

How to force users to use iPad landscape orientation?

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
  .contentHtml {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

How to fade out overflow text?

.long-text {
  white-space: nowrap;
  max-width: 170px;
  overflow-x: auto;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 80%, rgba(255,255,255,1) 100%);
    pointer-events: none;
  }
}

How does “text-overflow: ellipsis” work?

It only works when

• The element’s width is in px (pixels). Width in % (percentage) won’t work
• The element must have overflow:hidden and white-space:nowrap set

Responsive

How to detect different screen size?

• Create function detecting screen sizes

// src/utils/responsive.js

import { useMediaQuery } from 'react-responsive'
import { isTablet } from 'react-device-detect'

export const useTabletPortrait = () => {
  // const isDesktop = useMediaQuery({ query: `screen and (min-width: 64em)` })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })

  return isTablet && isPortrait
}

export const useTabletLandscape = () => {
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })

  return isTablet && !isPortrait
}

• Create global vars for responsive screen detection

// global.js

global.IS_TABLET = false
global.IS_TABLET_PORTRAIT = false
global.IS_TABLET_LANDSCAPE = false

// Root component
import 'src/config/globals'
import { useTabletPortrait, useTabletLandscape } from 'src/utils/responsive'
import 'src/config/globals'
import { isTablet } from 'react-device-detect'

const App = () => {
  // Setup global variable for responsive
  IS_TABLET = isTablet
  IS_TABLET_PORTRAIT = useTabletPortrait()
  IS_TABLET_LANDSCAPE = useTabletLandscape()

  return <>...</>
}

// Edit .eslintrc.js

...
  globals: {
    "IS_TABLET": true,
    "IS_TABLET_PORTRAIT": true,
    "IS_TABLET_LANDSCAPE": true,
  },
...

• Usage

import './index.css'

// In .js file

... className={`${IS_TABLET ? 'a-class-name--tablet' : 'a-class-name'}`}...

import './index.css'

const globalAny: any = global

// In .ts file

... className={`${globalAny.IS_TABLET ? 'a-class-name--tablet' : 'a-class-name'}`}...

How to get component width after React render?

• Reference a DOM element using useRef
• Access that element in useLayoutEffect

const App () => {
  const [zoom, setZoom] = useState(1);
  const divRef = useRef();

  useLayoutEffect(() => {
    if (divRef.current.offsetWidth > 1000) {
      setZoom(1.5)
    }
  }, []);

  return (
    <div ref={divRef} className=".area-main">
      <Component zoom={zoom} />
    </div>
  );
}