Breaking News: Grepper is joining You.com. Read the official announcement!

how to custom style material ui

Add Answer

Charley Chuckles answered on December 16, 2020 Popularity 9/10 Helpfulness 1/10

answer how to custom style material ui

related material ui common styles

related create a common style material ui style

related material ui common styles

related how to custom style material ui

related how to use css in material ui

how to custom style material ui

Comment

-1

import * as React from 'react';
import Box from '@mui/material/Box';

export default function GlobalCssPriority() {
  return (
   <>
     <Box sx={{
       width: "30px", 
       height: "30px", 
       border: "1px solid red"}}>
       marginLeft: "10px"
       </Box>
   </>
  );
}

// sx prop can be used to custom style or override the default syles
// of mui. Inside the object properties can be defined. 
// just remember to use camel case for properties with more than
// one word.

Popularity 9/10 Helpfulness 1/10 Language assembly

Source: mui.com

Tags: assembly material-ui

Link to this answer
Share Copy Link

Contributed on May 15 2022

Charley Chuckles

0 Answers Avg Quality 2/10

Closely Related Answers

material ui common styles

Comment

const useStyles = makeStyles({
  root: {
    color: 'red',
    '& p': {
      color: 'green',
      '& span': {
        color: 'blue'
      }
    }
  },
});

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: material-ui.com

Tags: material-ui mate

Link to this answer
Share Copy Link

Contributed on Dec 16 2020

Mystic Dev

0 Answers Avg Quality 2/10

create a common style material ui style

Comment

const styles = (theme) => ({
  cardContainer: {
    position: 'relative',
    width: '50%',
    padding: theme.spacing.unit / 2,
  },
  cardOuter: {
    height: '100%',
    width: '100%',
    textAlign: 'start',
  },
  card: {
    width: '100%',
    background: theme.palette.backgrounds.card.off,
  },
  cardOn: {
    background: theme.palette.backgrounds.card.on,
  },
  cardUnavailable: {
    background: theme.palette.backgrounds.card.disabled,
  },
  cardContent: {
    display: 'flex',
    flexWrap: 'wrap',
    minHeight: 98,
    height: 98,
    [theme.breakpoints.down('sm')]: {
      minHeight: 74,
      height: 74,
    },
    padding: `${theme.spacing.unit * 1.5}px !important`,
  },
});

export default styles;

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: material-ui mate

Link to this answer
Share Copy Link

Contributed on Feb 03 2021

Mystic Dev

0 Answers Avg Quality 2/10

create a common style material ui style

Comment

const styles = theme => ({
  ...card(theme),
  grid: {
    height: '100%',
    width: 'fit-content',
    paddingLeft: theme.spacing.unit * 2,
    paddingRight: theme.spacing.unit * 2,
    flexWrap: 'nowrap',
    overflowY: 'hidden',
  },
  name: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    fontSize: '1.12rem',
    fontColor: theme.palette.text.main,
    [theme.breakpoints.down('sm')]: {
      fontSize: '0.9rem',
    }
  },
  state: {
    textOverflow: 'ellipsis',
    margin: '0 auto',
    marginTop: theme.spacing.unit / 2,
    fontSize: '1.0rem',
    fontColor: theme.palette.text.light,
    [theme.breakpoints.down('sm')]: {
      fontSize: '0.8rem',
    }
  },
  alarmArmedHome: {
    background: theme.palette.backgrounds.card.alarm.home,
  },
  alarmArmedAway: {
    background: theme.palette.backgrounds.card.alarm.away,
  },
  alarmTriggered: {
    background: theme.palette.backgrounds.card.alarm.triggered,
  },
  icon: {
    margin: '0 auto',
    color: theme.palette.text.icon,
    fontSize: '2.7rem',
    [theme.breakpoints.down('sm')]: {
      fontSize: '1.7rem',
    }
  },
});

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: material-ui mate

Link to this answer
Share Copy Link

Contributed on Feb 03 2021

Mystic Dev

0 Answers Avg Quality 2/10

material ui common styles

Comment

// Re-export with a default theme
import { makeStyles } from '@material-ui/core/styles';

// Original module with no default theme
import { makeStyles } from '@material-ui/styles';

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: material-ui.com

Tags: material-ui mate

Link to this answer
Share Copy Link

Contributed on Dec 16 2020

Mystic Dev

0 Answers Avg Quality 2/10

how to custom style material ui

Comment

import * as React from 'react';
import { StyledEngineProvider } from '@mui/material/styles';
import Box from '@mui/material/Box';

export default function GlobalCssPriority() {
  return (
    <StyledEngineProvider injectFirst>
     <Box className="example"></Box>
    </StyledEngineProvider>
  );
}

// Styled Engine Provider uses prop injectFirst, which will inject the
// styles at the top precedence and any plain CSS class can be used to
// style the element in question.

Popularity 9/10 Helpfulness 1/10 Language assembly

Source: mui.com

Tags: assembly assembl

Link to this answer
Share Copy Link

Contributed on May 15 2022

Charley Chuckles

0 Answers Avg Quality 2/10

how to use css in material ui

Comment

-1

import React from 'react';
import Button from '@material-ui/core/Button';
import './PlainCssButton.css';

export default function PlainCssButton() {
  return (
    <div>
      <Button>Default</Button>
      <Button className="button">Customized</Button>
    </div>
  );
}

Popularity 10/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 02 2021

Santino

0 Answers Avg Quality 2/10

how to custom style material ui

Contents

More Related Answers

how to custom style material ui

Closely Related Answers

material ui common styles

create a common style material ui style

create a common style material ui style

material ui common styles

how to custom style material ui

how to use css in material ui

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.