In my project I have the following files: materialTheme.ts palette.scss I want to de-duplicate these files. I thought I could import the variables from palette.scss into materialTheme.ts but Next.JS throws an error about only importing global CSS into _app.tsx materialTheme.ts (not working) Is there any way I can make NextJS ignore this error just for materialTheme.ts and correctly import the
Tag: material-ui
responsive buttongroup buttons in material ui + reactjs app
How to achieve responsive ButtonGroup Buttons? I found some information that material-ui’s ButtonGroup can use an attribute called “Orientation” but I don’t understand how to use it with media queries which means changing its orientation in real-time when the device has a narrow width etc. I’m new to this so bear with me. Answer First you need to specify the
Selecting second child div while hovering on first child div in makeStyles Material UI
I have a parent div and two child divs, I want to apply CSS to the second child div when I hover on the first child div. This is the structure of the render method. What is the material UI’s makeStyles syntax for selecting child classes on hover? Answer You can use element+element selector to select the element after the
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 default behavior. I even tried with something super simple like this: And that code writes the text vertically. This is my code. I
Material-UI: How to add border in TreeView
Here, I have a code in React. I want to show dashed lines on the left of the tree. How can I do that? I need something like this: And, I want to merge the style of TreeView with this code: ] Now, I want TreeView to not show borderBottom at OrganizationalUnitName as ‘A’,’C’ and ‘D’. Because they will be
Material-UI Select doesn’t update after onChange
I’ve seen this problem about all around the web but nothing could come short of giving me a valid explanation. I’m using Material-UI Select and the good ol’ setState(…) from React (not hooks though) My component is composed essentially of those lines : And my problem is that my Select component dosen’t update its value after selecting another option. So
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 renders? I am not sure if I am missing some prop which material gives to us out
VSCode auto import – how to force Material-UI full path import
When using VSCode’s auto import feature to import Material-UI components, it will use a named import to import from the top-level file: However, I would like the auto import to use the full path import instead: I’ve tried to find a way to configure VSCode’s auto import to do this to no avail. Does anyone know if this is possible
Why cant I export and use my custom js styles?
This my main class And this is my style class called FoodStyles.js They both are in the same folder but still styles cannot be accessed Answer This could be the solution to your problem: (You need destructuring as done in line 7 for your styles to be used in your file.) With React, which fully embraces the ES6 syntax, destructuring
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: So i have a subtitle string with a bunch of variables in it that i wanted to use a line break to separate visually but adding n or even ‘…string’ + <br/> + ‘string…’ doesn’t work. What should i do? Answer I can’t test in