jss

How to change the border color of Material UI TextField

by

<CssTextField label=”Username” className=”username” name=”username” onChange={this.onChange} type=”text” autoComplete=”current-password” margin=”normal” inputProps={{ style: { fontFamily: ‘nunito’, color: ‘white’ } }} /> //declare the const and add the material UI style const CssTextField = withStyles({ root: { ‘& label.Mui-focused’: { color: ‘white’, }, ‘& .MuiInput-underline:after’: { borderBottomColor: ‘yellow’, }, ‘& .MuiOutlinedInput-root’: { ‘& fieldset’: { borderColor: ‘white’, }, ‘&:hover … Read more

How do you change a style of a child when hovering over a parent using MUI styles?

by

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

Styling the placeholder in a TextField

by

Case 1 Put the desired placeholder text in the label property of the TextField component, and use the labelClassName property of the TextField to customize it. You could also pass InputLabelProps with a className, classes or style attribute. Case 2 Refrain from using the label property of TextField and put the placeholder text on its … Read more

CSS child selector in MUI

by

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

styled-components – how to set styles on html or body tag?

by

You can, of course, maintain a separate CSS file that you include in your HTML via a <link> tag. For v4: Use createGlobalStyle from Styled-components. import { createGlobalStyle } from ‘styled-components’ const GlobalStyle = createGlobalStyle` body { color: ${props => (props.whiteColor ? ‘white’ : ‘black’)}; } ` <React.Fragment> <GlobalStyle whiteColor /> <Navigation /> {/* example … Read more

idiomatic way to share styles in styled-components?

by

You can either share actual CSS strings or share styled-components components: Share CSS strings: import {css} from ‘styled-components’ const sharedStyle = css` color: green ` // then later const ComponentOne = styled.div` ${sharedStyle} /* some non-shared styles */ ` const ComponentTwo = styled.div` ${sharedStyle} /* some non-shared styles */ ` Share actual styled-components: const Shared … Read more

How to use clsx in React

by

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

jss how to change opacity for a color

by

Material UI has a colorManipulator utility file, which includes an alpha function: import { alpha } from ‘@material-ui/core/styles/colorManipulator’; /** * Sets the absolute transparency of a color. * Any existing alpha values are overwritten. * @param {string} color – CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() * @param {number} value … Read more

CSS pseudo selectors with MUI

by

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

How to apply custom animation effect @keyframes in MUI?

by

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

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)