Mantine UI : Custom style for mobile device

How to give custom css for mobile devices using mantine UI, React JS app example.

import { useMediaQuery } from '@mantine/hooks';

function SelectLang({ languages, selectedLanguage, setSelectedLanguage }) {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <>
    <Center sx={{ height: isMobile ? '40vh' : '45vh' }}>  
      <Select
        data={languages}
        label="Select language"
        placeholder="Select language"
        value={selectedLanguage}
        onChange={setSelectedLanguage}
      />
    </Center>

    </>
  );
}

About the Author: smartcoder

You might like

Leave a Reply

Your email address will not be published. Required fields are marked *