{"pageProps":{"posts":[{"slug":"react-material-ui-custom-font","title":"How to add a custom font in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T17:00:00.000Z","url":"react-material-ui-custom-font","hashtags":"#react #material-ui","excerpt":"In this tutorial, I have discussed how you can add a custom font and override the React Material UI font."},{"slug":"react-material-ui-dark-mode","title":"How to build a dark mode theme in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T12:00:00.000Z","url":"react-material-ui-dark-mode","hashtags":"#react #material-ui","excerpt":"A practical guide on how to create a custom ThemeProvider component to switch between light mode and dark mode theme in React material UI"},{"slug":"react-material-ui-detect-dark-mode","title":"How to detect dark mode theme in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T02:00:00.000Z","url":"react-material-ui-dark-mode","hashtags":"#react #material-ui","excerpt":"You will learn to apply React material ui useMediaQuery() hook to detect dark mode theme"},{"slug":"react-material-ui-create-custom-theme","title":"How to create a custom theme in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T00:00:00.000Z","url":"react-material-ui-create-custom-theme","hashtags":"#react #material-ui","excerpt":"Learn to create a customize theme in React Material UI"},{"slug":"react-material-ui-use-theme","title":"How to get React material ui theme object in function components","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T00:00:00.000Z","url":"react-material-ui-use-theme","hashtags":"#react #material-ui","excerpt":"Learn to get the React Material UI theme object in function components using the useTheme hook"},{"slug":"react-material-ui-hide-autocomplete-clear-button","title":"How to hide clear button of Autocomplete in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-11T00:00:00.000Z","url":"react-material-ui-hide-autocomplete-clear-button","hashtags":"#react #material-ui","excerpt":"Learn to hide the clear button of Mui Autocomplete"},{"slug":"react-material-ui-set-typography-color","title":"How to change Typography color in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2021-11-03T00:00:00.000Z","url":"react-material-ui-set-typography-color","hashtags":"#react #material-ui","excerpt":"Learn to set a different text color to the Typography component in React Material UI"},{"slug":"react-material-ui-add-typography-variants","title":"How to add custom typography variants in React material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2021-11-02T00:00:00.000Z","url":"react-material-ui-add-typography-variants","hashtags":"#react #material-ui","excerpt":"Learn to create and use your own typography custom variants in your React Material UI"},{"slug":"react-material-ui-import-icons","title":"How to use Material UI icons in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-14T08:00:00.000Z","url":"react-material-ui-import-icons","hashtags":"#react #material-ui","excerpt":"Learn to import and use material-ui icons in React components"},{"slug":"react-material-ui-add-classes","title":"How to add multiple class names in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-08T00:00:00.000Z","url":"react-material-ui-add-classes","hashtags":"#react #material-ui","excerpt":"Learn to add multiple class names in React Material UI using clsx library"},{"slug":"pass-props-to-makestyles","title":"How to pass props to the makeStyles API in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-29T12:00:00.000Z","url":"pass-props-to-makestyles","hashtags":"#react #material-ui","excerpt":"Learn how to pass a component props to the makeStyles API in React Material UI that dynamically change the style property"},{"slug":"react-material-ui-typography-bold","title":"How to make React Material UI Typography bold","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-07T08:00:00.000Z","hashtags":"#react #material-ui","excerpt":"Learn to change the font-weight of the React Material UI Typography component to bold"},{"slug":"react-material-ui-font-family","title":"How to change font family of typography in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-02T08:00:00.000Z","hashtags":"#react #material-ui","excerpt":"Learn to change the font family of React Material UI Typography"}]},"__N_SSG":true}