Is there a way to change only the box-shadow color for mui Paper component. I made my background black so it's shadow is not visible
I've used
createMuiTheme({
overrides: {
MuiPaper: {
root: {
boxShadow: "0 1px 6px 1px blue"
}
}
}
}
as you can see when I give that boxShadow setting every elevation from 0 to 24 uses it
What I need is a way to change just the shadow color, thanks for your help
You can change the shadow color , but for a specific elevate you will need to change values if you are using sass or css to over ride , using withStyle you can do it like this
Refer this sandbox
https://codesandbox.io/s/infallible-platform-kemqg?file=/src/App.js:0-682
import "./styles.css";
import { makeStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(1),
width: theme.spacing(16),
height: theme.spacing(16),
boxShadow:
"0px 3px 1px -2px red,0px 2px 2px 0px rgba(100,0,0,0.9),0px 1px 5px 0px rgba(0,0,0,0.12)"
}
}
}));
export default function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<Paper elevation={2} />
<Paper elevation={4} />
<Paper elevation={3} />
</div>
);
}
Related
I am trying to add a border color to a styled component using MUI:
const Style = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
borderColor: theme.palette.success.main,
border: 10,
borderTop: 10,
width: INFO_WIDTH
}));
However, I don't see any change in the effect:
Screenshot of browser
I'm trying to follow the guidelines specified by MUI but it's not working. Does anyone know a workaround?
The guidelines you linked to are for the sx prop (or lower-level usage of #mui/system) -- not the styled API. One key difference between the two is that for the sx prop, a numeric border value is treated as a shorthand for ${value}px solid. The styled API does not automatically add solid, so border: 10 just becomes border: 10px which is not sufficient for causing a border to be displayed.
A separate issue with your example is that you specify borderColor before border. Since border is a shorthand for border-width, border-style, and border-color, even when you don't specify a color with the border value, a previously specified border-color will be overridden with the default.
Below is an example showing the correct syntax for specifying the border for both sx and styled:
import * as React from "react";
import Box from "#mui/material/Box";
import { styled } from "#mui/material/styles";
const StyledDiv = styled("div")(({ theme }) => ({
border: "10px solid",
borderColor: theme.palette.success.main,
width: "5rem",
height: "5rem",
margin: theme.spacing(1)
}));
export default function BorderSubtractive() {
return (
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box
sx={{
border: 10,
borderColor: "success.main",
width: "5rem",
height: "5rem",
m: 1
}}
/>
<StyledDiv />
</Box>
);
}
I am learning about MUI and got this error. The purpose of the code is to be responsive. Thank you very much.
Link CodeSandbox
In v5, ThemeProvider should be defined at the root of your application and useStyles should not be called before ThemeProvider
Reference link
Referenced Sandbox link
import ReactDOM from "react-dom";
import {
ThemeProvider,
createTheme,
StyledEngineProvider
} from "#mui/material/styles";
import Demo from "./demo";
const theme = createTheme();
ReactDOM.render(
<ThemeProvider theme={theme}>
<StyledEngineProvider injectFirst>
<Demo />
</StyledEngineProvider>
</ThemeProvider>,
document.querySelector("#root")
);
import { makeStyles } from "#mui/styles";
import Button from "#mui/material/Button";
const useStyles = makeStyles((theme) => ({
root: {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
border: 0,
borderRadius: 3,
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
color: "white",
height: 48,
padding: "0 30px",
[theme.breakpoints.down("md")]: {
padding: "40px"
}
}
}));
export default function Hook() {
const classes = useStyles();
return <Button className={classes.root}>Styled with Hook API</Button>;
}
Using styled component API
import { styled } from "#mui/material/styles";
const MyButton = styled("button")(({ theme }) => ({
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
border: 0,
borderRadius: 3,
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
color: "white",
height: 48,
padding: "0 30px",
[theme.breakpoints.down("sm")]: {
background: "blue"
}
}));
export default function Hook() {
return <MyButton>something</MyButton>
}
import { styled } from '#mui/material/styles';
const useStyles = styled((theme) => ({
root: {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
border: 0,
borderRadius: 3,
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
color: "white",
height: 48,
padding: "0 30px",
[theme.breakpoints.down("md")]: {
height: 100
}
}
}));
I am using the modal component in material ui and I am having trouble overriding the auto display styles they have for the component.
Here is my use styles
const useStyles = makeStyles((theme) => ({
modal: {
inset: '1px 1px 0 0',
width: '40vw',
},
})
<Modal
aria-labelledby='transition-modal-title'
aria-describedby='transition-modal-description'
className={classes.modal}
>
the default css properties are overriding the styles I wrote in classes.modal, why is this happening and how can I fix it? I need to change the inset property completely
You can use linear styles if you can't override it with a class.
<Modal style={{inset:'1px 1px 0 0',width:'40vw'}}>
try to use (paper and <Fade/>):
const useStyles = makeStyles((theme) => ({
modal: {
inset: "1px 1px 0 0",
width: "40vw"
},
paper: {
backgroundColor: theme.palette.background.paper,
border: "2px solid gray",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3)
}
}));
sandbox
How to center a material ui icon in a button?
import AddIcon from '#material-ui/icons/Add';
<Button><AddIcon style={{ bottom: 3, right: 3 }}/>ADD</Button>
enter image description here
There is a special type of button called Buttons with icons and label.
You can read more about it here.
To add custom styles to Material ui you need to makeStyles
Example
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
...
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
},
label: {
textTransform: 'capitalize',
},
});
...
const classes = useStyles();
return (
<AddIcon
classes={{
root: classes.root,
label: classes.label,
}}
>
//using a standard css colour
<BathroomTwoToneIcon style={{ color: "blue" }} />
//import a material ui colour, and use that
import { purple } from "#mui/material/colors";
<BathroomIcon style={{ color: purple[500] }} />
I tried to create a custom styled button with material ui to reuse in other files of my project. Somehow, the button does not adapt the style i defined. Could someone tell me where I made a mistake / forgot something ?
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import IconButton from '#material-ui/core/IconButton';
const styles = themes => ({
root: {
margin: "50px",
padding: "20px",
display: 'block'
},
button: {
marginTop: '20px',
padding: '100px',
height: "300px+15vh",
width: "300px+15vw",
borderRadius: "20% 20%",
color: '#FFFFFF',
backgroundColor: '#05164D',
'&:hover': {
backgroundColor: "rgba(5, 22, 77, 0.75)",
boxShadow: '0 3px 5px 2px rgba(153, 153, 153, .8)'
},
},
});
const styledButton = props => {
const { classes } = props;
return (
<div>
<IconButton className={classes.button} {...props} aria-label="Gift" disableTouchRipple="true">
{props.children}
</IconButton>
</div>
)
}
export default withStyles(styles)(styledButton);