jss Questions

1

Solved

I want to add a rule for all <p> in the current component. I couldn't find information anywhere (material-ui documentation, Stack Overflow, etc.) on how to add CSS rules by tag name. Is it n...
Forgiving asked 21/4, 2020 at 13:58

2

Solved

I need to know how to target 'element' when root is selected This is makeStyles: const useStyles = makeStyles(theme => ({ root:{ '&.selected': { } }, element: { } }) This is jsx &...
Photomultiplier asked 18/12, 2019 at 0:28

1

Solved

I have code like this: const formControlStyles = { root: { '&:hover .MuiFormLabel-root': { } } } Is it safe to use the class name in theme overrides to access other components? Addition...
Menefee asked 17/3, 2020 at 11:19

1

Solved

I am using a component from an external library that does not allow me to change much of its style, but I would like to change the style of a button that is a material ui button, when inspecting th...
Implantation asked 3/3, 2020 at 10:45

2

Solved

I want this using jss styling. .a{ height: 20px; } .b{ height: 40px; } .a,.b{ width: 100px; } Try 1 Make a rule c and add the class to both a and b c: { width: '100px' } Try 2 Make a object...
Macassar asked 7/8, 2017 at 22:20

2

Solved

Preface I asked a similar question to this several days back and while related in nature I believe the solution will ultimately be different, so I am asking again in a different thread. CodeSanbo...
Orgel asked 12/2, 2020 at 0:55

2

Solved

RELATED QUESTION OVER AT: Styles being overwritten by Material-UI style I am create a component library on top of Material UI. Using JSS I'd like to be able to pass in styles to my custom componen...
Hackney asked 7/2, 2020 at 18:51

3

I would like know how to work with css class-nesting in Material-UI or in JSS in general?I am trying as below. card: { cardHeader:{ marginTop:"30px" } }
Allegra asked 2/8, 2018 at 13:22

1

Solved

I'm using React JS and Material UI framework. I need the adornment icon color inside a text field to behave like the border of the input. If you look at the example from the documentation you can...
Entrust asked 8/1, 2020 at 22:12

1

Solved

I've been using React for a while, and now I want to switch to using React with TypeScript. However, I've grown used to JSS styles (via the react-jss package), and I can't understand how I'm suppos...
Cardoso asked 6/1, 2020 at 23:54

1

I have a situation the JSS styles of my MUI component library (Styles A) are superceding those provided by a consumer's website (Styles B). Styles A is intended to overwritable by Styles B. Take ...
Felizio asked 28/11, 2018 at 1:48

2

I'm using material-ui and next and jss-rtl in my react project but there is a problem the page is still ltr after using <JssProvider ...> -rtl component code: import React from "react"; imp...
Isreal asked 12/4, 2018 at 20:29

1

Solved

I'm trying to change the background of one div on the hover of another using material ui. The standard css is: #a:hover ~ #b { background: #ccc; } This is my attempt in material ui. const us...
Disability asked 13/12, 2019 at 18:33

1

Solved

I have the following CSS: [contentEditable=true]:empty:not(:focus):before{ content:attr(data-text) } which allows to show a placeholder inside a content-editable div when it has no content. I a...
Kirov asked 13/12, 2019 at 16:38

2

I have an application where I'm using Material UI and its theme provider (using JSS). I'm now incorporating fullcalendar-react, which isn't really a fully fledged React library - it's just a thin...
Drue asked 6/12, 2019 at 5:19

3

Solved

import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import { orange } from '@material...
Defense asked 9/12, 2019 at 6:45

1

I am making a custom input component with MUI InputBase, and I want to have a "Clear" button endAdornment that only appears when you hover over the input: <InputBase inputComponent={getCustom...
Resuscitate asked 4/12, 2019 at 21:14

1

Solved

What I am trying to achieve I have two classes - root and button - I want to affect button class on root state (for example :hover). My attempt I'm trying to display button on root:hover. con...
Abbate asked 30/10, 2019 at 13:15

1

Solved

I start to study material-ui and create a simple app in the SandBox: https://codesandbox.io/s/eager-ride-cmkrc The style of jss is unusual for me, but if you help me with these two simple exercise...
Katlin asked 19/9, 2019 at 22:6

1

Solved

I'm trying to transform my css from a less file to material createStyles and i can't get my head around how it works. I understand the basics of the createstyles but i can't my child selector work...
Cenotaph asked 10/9, 2019 at 13:24

1

Solved

I'm using Material UI and trying to convert normal css classes into js file. .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navItem { float: left; flex: 1; } .na...
Musser asked 29/8, 2019 at 19:50

2

Solved

Running Material UI 1.0.0-beta.24 I'm setting a new theme using createMuiTheme: import {createMuiTheme} from 'material-ui/styles'; const theme = createMuiTheme({ typography: { fontSize: 16 } ...
Incisive asked 26/12, 2017 at 11:1

6

I am using ant design to react UI components. I need to remove the padding given for the ant design card. So I need to remove the padding given for the classes .ant-card-wider-padding and .ant-c...
Tallith asked 30/9, 2018 at 13:7

1

Solved

In Material UI, to extend the distance between MuiInputLabel and MuiInput, I have to override the marginTop of label + .MuiInput-formControl. However, createMuiTheme's override only provide direct...
Murky asked 16/2, 2019 at 16:3

2

Solved

I'm using React, Material UI with JSS and React Router. I'm hooking in to <NavLink> to apply an active class like: <NavLink to={'/dashboard'} activeClassName={classes.active} <button...
Porridge asked 14/1, 2019 at 15:14

© 2022 - 2024 — McMap. All rights reserved.