Questions tagged [makestyles]
61 questions
0
votes
2 answers
makeStyles in Material UI not applying
I am trying to style my pahe using makeStyles from material ui with react js. it is working for me with some pages, but most of them are not working even if I am using the same styling elements like tha backgroundColor.
in the code below, only…
AymenSeriti
- 1
- 1
- 2
0
votes
2 answers
Why am i unable to override Material UI styles using makeStyle
I am unable to override the material UI Appbar styles unless i use sx inside the component to style or use !important inside makeStyle classes. I didnt want to use sx since i want the component to look neat. My code looks like :
const useStyles =…
NoushadM
- 111
- 3
- 9
0
votes
1 answer
react appbar width not sizing properly
In my react project I am trying to adjust the appbar width. As of now it is pushed to far to the left as shown in picture below.
The custom class I am trying to use is not doing anything. No error messages, just not working.
Does anyone see what I…
solarissf
- 1,199
- 2
- 23
- 58
0
votes
1 answer
Pivotting a material UI dialog in the center of the screen when it's height may vary
I have an MUI Dialog, in which its height varies due to it being of a list that is filtered by the user. It ends up being annoying because the the dialog "jumps around" the screen trying to maintain it's center position as it grows and shrinks. This…
theJuls
- 6,788
- 14
- 73
- 160
0
votes
1 answer
Heroku Deployment Removes Material UI makeStyles?
It appears that Heroku deployment is removing all of my calls to my MUI makeStyles doc and is subsequently breaking a good amount of my app's appearance. Looking for any wisdom on this before I go back and do all my styling in-line (tested it - this…
Chris Mo
- 41
- 6
0
votes
0 answers
When styling using Material-UI with React, why do some component's classname have different numbers appended to it?
For example, if you create a makeStyles variable for a component (e.g. TableRow) and that component is called multiple times by a parent component (Table), each TableRow gets class names like “.mui-make-styles-column244” and…
Hsin Tung
- 9
- 2
0
votes
1 answer
the styling rules inside my makeStyle Materiel UI not working
I want to apply the field class on the TextField Components. but the margins do not apply.
My code is like below:
import React from 'react';
import { Typography, Button, Container, TextField } from '@mui/material';
import SendIcon from…
reda baha
- 49
- 4
0
votes
2 answers
Add and remove classes in React
How can I add/ remove a className on click to change the style of some component?
I want to rotate the arrow on the right when I click on it and display: none; all the components beside it.
I also want to add do the same thing when I hit the…
Mahmoud Ali
- 116
- 2
- 2
- 10
0
votes
0 answers
Material UI makeStyles breaks my components styles when I'm importing
so I'm using next@material-ui on a react project. The issue is when import my makeStyle hook into Navbar it breaks my CSS on the rest of the App. Here is my project structure:
Index.js
ReactDOM.render(
Adrian
- 65
- 7
0
votes
1 answer
set with and height on makeStyles theme material-ui
const useStyles = makeStyles(
(theme) => ({
iconContainer: {
margin: theme.spacing(0, 4, 0, 0),
[theme.breakpoints.up('md')]: {
margin: theme.spacing(-1, 5, 0, -1),
},
},
Sava
- 113
- 1
- 13
0
votes
1 answer
::before pseudo element not working in makeStyles
I am using makeStyles in react and I cannot figure out why the ::before content won't show. It will work if I make the content a picture but it doesn't show with text.
To clarify further the ::before element is not being rendered at all.
cardPoint:…
Bill Watters
- 35
- 4
0
votes
1 answer
transitionDelay on makeStayles on material-UI
const useStyles = makeStyles({
buttonStyle: {
background: "red",
"&:hover": {
transitionDelay: '1',
transform: "scale(1.1)",
background: "red",
},
},
});
how can i implemated i transitionDelay on makeStyles?…
Sava
- 113
- 1
- 13
0
votes
1 answer
How can I use 'theme' made with 'createMuiTheme()' inside 'makeStyles()'?
I have made customTheme using createMuiTheme() and I used it in the .
Now, I want to make some custom styles using that customTheme inside the makeStyles() function. But makeStyles() is not getting my customTheme. It gets the default…
0
votes
1 answer
I can't get this map with buttons to span but it works ok for another map where is the problem
I learn JavaScript React and now I have this question:
I have this Codesandbox
In the Docs about span I read but I can't get the buttons in the image here to span like they do on the right side:
I removed the span code and now tried with css but no…
Kid
- 1,869
- 3
- 19
- 48
0
votes
1 answer
React JSS (current) element selector - `&element`
Is there a working equivalent for current element selector in React JSS styling syntax?
'&element': { margin: 0 }
Use case
I have this style for all
optimista
- 804
- 1
- 13
- 27