JavaScript, BR xsHide, with Material-UI

BR.xsHide.sample.tsx

/**
 * 範例: \<BR xsHide /> 
 */
import React from 'react'
import clsx from 'clsx'
import { withStyles } from '@material-ui/core/styles'

export const BR = withStyles(({ breakpoints }) => ({
  xsHide: {
    [breakpoints.down('xs')]: {
      display: 'none'
    }
  }
}))((props: {
  classes: Record<string, string>,
  xsHide?: boolean
}) => {
  return (
    <br className={clsx(props.xsHide && props.classes.xsHide)} />
  )
})

BR.xsHide.sample2.tsx

/**
 * 範例: \<BR xsHide /> 
 */
import React from 'react'
import { useMediaQuery, useTheme } from '@material-ui/core'

export function BR(props: { xsHide: boolean | undefined }) {
  const { breakpoints } = useTheme()
  const matchXs = useMediaQuery(breakpoints.down('xs'))

  // xsHide
  if(props.xsHide && matchXs)
    return (<></>)
 
  // default
  return (<br />)
}