jss Questions
4
Solved
I'm using Material UI in react. Let's say I have this component with these styles:
const useStyles = makeStyles(theme => ({
outerDiv: {
backgroundColor: theme.palette.grey[200],
padding: them...
Quits asked 4/12, 2019 at 14:54
3
Solved
How do I change the color of the icon and text of the selected link (Home in this example) to red and the color of the icon and text of the inactive links (Course and Authors in this example) to gr...
Wrote asked 26/1, 2019 at 2:11
2
Solved
I'm using Material-UI v5 and trying to migrate to using styled instead of makeStyles because it seems as though that's the "preferred" approach now. I understand using makeStyles is still...
Bigford asked 6/8, 2021 at 0:34
4
Solved
I'm building a React application and I'm using Material UI for my components. I wonder how I can give an !important property to a style?
I tried this:
<Paper className="left"...>
I...
Dygert asked 5/11, 2018 at 9:13
2
I'm currently training on ReactJS. I'm using material-ui and JSS (totally new for me).
I don't understand how can I simply select my H6 element or my H6 children elements (dangerStyle).
Any idea ...
Rashid asked 10/10, 2019 at 15:42
2
Solved
Issue: styles applied to class names generated by Material-UI / JSS are incorrectly changing when components are re-rendered.
Setup: I'm serving a React app (built with create-react-app) that uses...
Index asked 16/6, 2019 at 14:6
4
I am building a GatsbyJS site with Material UI. Using the withStyles HOC, is it possible to make a blinking animation?
I tried providing animation in styles:
const styles = theme => ({
'@keyfra...
Duran asked 29/9, 2018 at 13:18
3
Solved
I am trying to give custom color to deleteIcon of Chip component (MUI v5). As I can see, my styles are overridden by .css-inlzrk-MuiButtonBase-root-MuiChip-root .MuiChip-deleteIcon , but I could no...
Macruran asked 1/11, 2021 at 15:35
1
Solved
I'm trying to migrate my components from MUI v4 to v5, and I've gotten to a point where I don't know how to migrate my makeStyles components.
Before, I had something like this that was working:
con...
Overwrought asked 15/10, 2021 at 9:43
1
I'm trying to add a CSS keyframe animation to my Material UI styled component but adding a keyframe animation seems to throw an error. Here's what my code looks like:
const PulsatingCircle = styled...
Zehe asked 9/2, 2021 at 20:9
3
Solved
I'm using React and Material-ui, and currently I'm doing something like the code below.
Is there a better way?
For instance, is there a function that allows you to access 'props' within the "styl...
Rocca asked 10/8, 2018 at 7:51
2
Solved
At the moment I'm using SCSS, as it is easy to use with NextJS. I really like how this system works, using the SCSS modules, and so I would also like to use it when using Material-UI. Material-UI u...
Berzelius asked 1/9, 2021 at 14:42
2
Solved
I have a fairly complex application with multiple drawers. I'm having an issue with the right side drawer animations. The drawers themselves animate fine, but the parent divs do not. I tried applyi...
Paraffinic asked 27/7, 2018 at 19:40
2
Solved
I'm using JSS(Javascript Style Sheets) in my React project. I was trying to select first-child or last-child, so I tried the following
carousel: {
"& img:first-child": {
padding: "0 5px"
}
...
Mandle asked 13/9, 2018 at 23:52
1
Solved
I did not manage to find the equivalent of border-image-source css
My goal is to render a border gradient on a button component
Schlicher asked 8/4, 2021 at 0:4
2
Solved
In react-jss documentation, the authors have written:
'HOC based API is deprecated as of v10 and will be removed in v11.'
This means, as far as I understand, that such HOC functionality as inject...
1
Solved
I am writing a React application and using @material-ui/styles, which is based on JSS. I am styling using the higher-order component API. How do I specify an element through its id in my styles? I ...
Disinclined asked 29/12, 2020 at 10:46
1
Can you please explain what is the difference between a space after the ampersand and no space
e.g.
Can you please explain why there is a space after the ampersand in & label.Mui-focused and no...
Sandrasandro asked 5/12, 2020 at 2:32
1
Solved
Recently I upgraded my material UI version from 3.9.4 to 4.11.0, I had to replace these on the theme style override:
to avoid these warnings:
But I require to put that fontSize styles wit !import...
Misfire asked 12/10, 2020 at 21:51
3
Solved
I am trying to understand some uses of clsx in assigning classnames to a component in React.
The construct
className={clsx(classes.menuButton, open && classes.hide)}
is clear enough. It a...
Chainplate asked 19/8, 2019 at 12:59
2
Solved
I have learned to use animation in CSS using @keyframe. I however want to write custom animation code for my React project (using Material UI). My challenge is how I can write the Javascript code t...
Crippling asked 20/11, 2019 at 7:26
1
I'm using nextjs with typescript and react-jss. I get the error:
Warning: Prop `className` did not match. Server: "mobileNavToggle-0-2-10" Client: "mobileNavToggle-0-2-2"
I think this is caused ...
1
Solved
I'm trying to use Material-UI (https://material-ui.com/) with NextJS (https://nextjs.org/), styling with the JSS solution.
It works well in my local environment, but my design is broken on prod. A...
Penetrate asked 4/6, 2020 at 19:42
2
Solved
I'm experimenting with JSS to see if it is realistic to migrate a Sass code base. I have a very basic example of a CSS style that, when hovered, modifies the style of a child node.
span {
color:...
Titanomachy asked 29/6, 2018 at 5:12
2
Solved
So I got the latest versions of jss and material ui.
Im using withStyles HOC and dynamically changing css in styles object, but I cant seem to be able to declare keyframes in css. Im also using ne...
Wiper asked 12/11, 2019 at 10:45
© 2022 - 2024 — McMap. All rights reserved.