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>
  );
}

Be the first to comment

Leave a Reply

Your email address will not be published.


*