A very short answer (there is much more to it in general) CSS Template strings SC parses template strings with CSS for at runtime. Emotion has a babel plugin to prepare those parsed things in a format that can render final CSS at runtime faster. JSS currently only supports basic template strings and otherwise uses … Read more
You can just cast it. For example: left: { display: “block”, float: “left!important” as any, }, or left: { display: “block”, float: “left!important” as “left”, }, Here’s a playground example.
Here’s the syntax for v3 and v4 (v5 example further down): const styles = { cardcontent: { padding: 0, “&:last-child”: { paddingBottom: 0 } } }; Here’s a working example demonstrating this: import React from “react”; import ReactDOM from “react-dom”; import CardContent from “@material-ui/core/CardContent”; import { withStyles } from “@material-ui/core/styles”; const styles = { cardcontent: … Read more
Since you want to do this globally, you may want to follow what CssBaseline does in it source code: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CssBaseline/CssBaseline.js const styles = theme => ({ ‘@global’: { ‘*::-webkit-scrollbar’: { width: ‘0.4em’ }, ‘*::-webkit-scrollbar-track’: { ‘-webkit-box-shadow’: ‘inset 0 0 6px rgba(0,0,0,0.00)’ }, ‘*::-webkit-scrollbar-thumb’: { backgroundColor: ‘rgba(0,0,0,.1)’, outline: ‘1px solid slategrey’ } } }); it looks … Read more
You can just pass the displayEmpty into select <Select id=”demo-simple-select-outlined” displayEmpty value={select} onChange={handleChange} > and define the menuItem like <MenuItem value=””><Put any default Value which you want to show></MenuItem>
Below is an example of the correct syntax for v4 (“& $addIcon” nested within &:hover). Further down are some v5 examples. import * as React from “react”; import { render } from “react-dom”; import { Grid, makeStyles } from “@material-ui/core”; import AddIcon from “@material-ui/icons/Add”; const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: … Read more
As advised from @josh, using & deleted: { “& td”: { background: “red” } } import React from “react”; import PropTypes from “prop-types”; import { withStyles } from “@material-ui/core/styles”; import Table from “@material-ui/core/Table”; import TableBody from “@material-ui/core/TableBody”; import TableCell from “@material-ui/core/TableCell”; import TableHead from “@material-ui/core/TableHead”; import TableRow from “@material-ui/core/TableRow”; import Paper from “@material-ui/core/Paper”; const styles … Read more
I found out that the content attribute needed to be double quoted like this const styles = () => createStyles({ h: { ‘&::before’: { content: ‘”some content”‘, display: ‘block’, height: 60, marginTop: -60 } } }); and then everything worked like expected
Here is an example demonstrating the keyframes syntax within makeStyles: import React from “react”; import ReactDOM from “react-dom”; import { makeStyles } from “@material-ui/core/styles”; import Button from “@material-ui/core/Button”; import clsx from “clsx”; const useStyles = makeStyles(theme => ({ animatedItem: { animation: `$myEffect 3000ms ${theme.transitions.easing.easeInOut}` }, animatedItemExiting: { animation: `$myEffectExit 3000ms ${theme.transitions.easing.easeInOut}`, opacity: 0, transform: “translateY(-200%)” … Read more
clsx is generally used to conditionally apply a given className This syntax means that some class will only be applied if a given condition evaluates to true const menuStyle = clsx({ [classes.root] : true, //always applies [classes.menuOpen] : open //only when open === true }) In this example [classes.menuOpen] (which will evaluate to something like … Read more