Import SASS variables into Material UI theme with NextJS

In my project I have the following files: materialTheme.ts import { createMuiTheme, Theme } from “@material-ui/core/styles”; const theme: Theme = createMuiTheme({ palette: { primary: {…

Material Grid refused to lay out horizontal even it’s default behavior

I read about Material-UI and trying to make two components sid by side and that is the default as I understand but whatever I try it looks like this: Material Grid refused to go horizontal even it’s …

Material UI Date Picker Calendar Open Immediately On Page Render

I have a calendar from Material UI which only opens when I click on it so it starts like this And then opens to this Is there anyway I can have it so that it is immediately open as soon as the page …

Line break in a CardHeader element subtitle (MaterialUI / ReactJS)

I’m using pretty old Material UI (Ver. 0.20.1) components. Here’s a chunk of my code: return( <CardHeader actAsExpander={true} showExpandableButton={…

How to pass form fields from one page to another page in ReactJS?

Checkout.js This is the checkout.js file. In this file, I returned the Checkout Form, and Now I want to use the form fields of the checkout form page. The question is how will I get the form fields …

how to show a floating action button always in bottom of screen

I’m using material ui I have a floating action button and I want to show it a specific place that would not change with scroll, and also I want to know if it is a fine problem here is the code const …

Pseudo element not showing in React on paragraph tag despite using display block

This pseudo element ::after won’t show up in my browser at all. I am using React.js and Material UI makeStyles. This is the code: modalTitle: { borderBottom: ‘2px solid red’, display: ‘block’, …

Toggle not working for material ui check boxes when printed in loop

I am trying to print checkboxes of 4 per a row, where row and values of these checkboxes comes dynamically (row count may vary ) below is my jsx code matrix.map((row, index) => ( &…

React: How to make selected options not to show in input field of Material UI Autocomplete

I would like not to have the labels of the selected Options in the Input field: It can probably be addressed in the renderInput property but I dont know how. I know there is the limitTags prop but the …

ReactJs: Generate Random number to display in Material UI progress bar

I am trying to generate random number for test functionality to display in my Material UI Progress bar . This piece of JS code is working in JS fiddle. But I want to show this random number with my …