jss Questions

5

I'm having a very difficult time trying to achieve something simple with the Grid Component from MaterialUI. Specifically, I'd like to align one item to the left, and another to the right on one la...
Bloated asked 25/3, 2020 at 23:28

4

I can't seem to change the color of my speed dial. my makeStyle has worked on everything else. Any ideas? import React, {useContext} from 'react'; import {AppBar, Box, Button, Container, makeStyles...
Dulcinea asked 28/9, 2021 at 17:23

25

Solved

I can't seem to figure out how to change the outline color of an outlined variant TextField I looked around GitHub issues and people seem to be pointing towards using the TextField "InputProps...
Chlamydate asked 21/10, 2018 at 0:28

3

Solved

I am wondering how to apply styles to the Material UI's underlying Button from the IconButton. For example, in order to change the close icon hover/focus color, I need to currently change the :hove...
Frei asked 27/6, 2019 at 19:14

11

Solved

Currently I am using the following code to add a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) I would like to...
Nonlinearity asked 13/11, 2017 at 16:8

14

Solved

I really hate having to have an external stylesheet for my scrollbar stylings and I want to put it in with the rest of my styles on my root component. I have tried this... const styles = (theme: T...
Servais asked 14/12, 2018 at 1:35

5

Solved

I have a form with a very awkward background color. Would like to change the color of the helper text of the Outlined TextField when it is in an error state but can't seem to override it. It persis...
Tyratyrannical asked 28/11, 2019 at 8:36

5

Solved

How would I hide / remove the underline in a TextField component without using the following code: const theme = createMuiTheme({ overrides: { MuiInput: { underline: { '&:hover:not($disabl...
Rumanian asked 20/5, 2018 at 15:40

6

Currently I am struggling with setting the background color of a MenuItem component which is selected to a different color. (without having to using !important to force it) The component code: <...
Cardona asked 16/5, 2018 at 12:43

8

Solved

When using the Card component from Material UI it seems like the CardContent has a padding-bottom of 24px that i cannot override with the following code. I can set paddingLeft, Right and Top using ...
Transposal asked 17/1, 2019 at 13:5

6

Trying to write a style with Material UI equivalent to this in CSS .deleted td { background: red } But not sure how to do it in Material UI's CSS in JS way. Here are the relevant snippets I have ...
Immediacy asked 7/1, 2019 at 11:4

11

The TextField API doesn't mention anything about how one could style the pseudo placeholder element of the input element. Basically, I would like to change the default styling of the placeholder t...
Artemisia asked 14/12, 2017 at 0:55

5

Solved

I am trying to make an input component that has a white underline. Currently, when the user hovers over the component, the underline color changes to black. I would expect this be white. I believe ...
Fireweed asked 6/6, 2018 at 11:39

3

Solved

I'm having a really hard time to remove the yellow background on autofill from the Material UI TextField component. In older versions I did it this way: const inputStyle = { WebkitBoxShadow: '0 0...
Schechinger asked 15/2, 2019 at 10:6

2

Solved

How do I go about styling the transparent dark overlay of a material-ui dialog or modal? I'm using material-ui/React/Typescript. Instead of a transparent dark, I want it to be a transparent whit...
Arium asked 21/3, 2019 at 15:43

4

Solved

I'm trying to use https://material-ui.com/ components inside shadow dom, and need a way to inject those styles inside shadow dom. by default material-ui, which uses jss under the hood injects style...
Always asked 29/1, 2019 at 21:48

4

I'm trying to use the Material UI Toggle Button kind of like a radio button to give the user 2 choices to a given question. It's functioning mostly as expected, but when trying to adjust the style ...
Caneghem asked 19/9, 2020 at 23:9

3

Solved

I have seen in a lot of the Material UI code that they use pseudo selectors in their react styled components. I thought I would try to do it myself and I cannot get it to work. I'm not sure what I ...
Farci asked 13/12, 2018 at 18:44

2

I have started using MUI v5 with makeStyles in my previous project. After deploying, I faced a huge delay in loading page's CSS. So I started searching that found out makeStyles is deprecated in MU...
Erikerika asked 24/4, 2022 at 20:51

4

Solved

I can't seem to find a way to override the following rule on an InputBase: .MuiInputBase-root.Mui-disabled { color: rgba(0, 0, 0, 0.38); } The rule I want to apply is: color: "rgba(0, 0, 0, 0.7...
Niu asked 24/10, 2019 at 11:27

13

Solved

Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWr...
Leanora asked 6/9, 2017 at 4:12

4

Solved

I'm studying Material UI, and in the course, the instructor asks me to style just one component and not the entire theme. For that, it uses the makeStyles function and spreads the theme.mixins.tool...
Simferopol asked 12/10, 2021 at 22:40

2

Take a look at this example from css-tricks: .container { grid-template: [row1-start] "header header header" 25px [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px aut...
Harrold asked 16/5, 2018 at 19:53

3

Solved

I am using the material-ui react textField with type time , I want to remove the arrow and cross that appears on the right on hover and focus. https://github.com/mui-org/material-ui/blob/master/do...
Giuliana asked 12/5, 2019 at 17:5

3

Solved

trying to port some code from jss to styled-components, jss code looks something like: //... const styles = { myStyles: { color: 'green' } } const {classes} = jss.createStyleSheet(styles).atta...
Windsucking asked 2/4, 2018 at 21:21

© 2022 - 2024 — McMap. All rights reserved.