I want to remove the shadows for all contained buttons in my custom MUI theme but I don't know how to go about it so far. How do I do so? I have tried setting the boxShadow property for each individual Button to Zero but that's not working.
You could use a Button prop named disableElevation (which is false by default)
You could use it per component or set globally in theme setting
In a single component
<Button variant="contained" disableElevation={true}>
a button
</Button>
Globally via theme setting
const theme = createTheme({
components: {
MuiButton: {
defaultProps: {
disableElevation: true
}
}
}
});
Codesandbox demo
Related
I'm trying to customise the look of MUI's <Button /> component. As i want to do it by using tailwind classes i tried to use defaultProps instead of styleOverrides.
const lightTheme = createTheme({
components: {
MuiButton: { defaultProps: { classes: { root: 'p-8' } } },
},
});
It is working fine except that i'm not able to add tailwind classes when i use the <Button /> component as this will overwrite the changes i made above.
<Button variant="contained" classes={{ root: 'p-12' }}>
Ok
</Button>
Is there a way to extend the definition of the classes prop rather than overwriting it?
I'm using chakra ui and I want to set the width of the drawer component to 370px.
I want to set the width of the drawer component to 370px. If I pass sm or lg as the size, it will change the size to the default setting, but I can't change it to the size I want.
https://chakra-ui.com/docs/overlay/drawer
<Drawer
isOpen={isOpen}
placement="right"
onClose={onClose}
finalFocusRef={btnRef}
size="lg"
>
Ideally a new 'size' should be added to the theme and use the new size for <Drawer/>. This works alright when sidebar width is fixed (but custom).
However, if sidebar width is dynamic (set by dragging the sidebar edge or for some other reason) you need to set sidebar width manually.
One way is to add w={customSidebarWidth} and maxW={customSidebarWidth} to <DrawerContent/>. Also consider removing padding on <DrawerBody/>.
...
<DrawerContent w={customSidebarWidth} maxW={customSidebarWidth}>
...
<DrawerBody p={0}>
...
...
</DrawerBody>
...
...
</DrawerContent>
...
You have to override the dialog props i.e maxW
import { extendTheme } from "#chakra-ui/react";
const theme = extendTheme({
components: {
Drawer: {
parts: ['dialog', 'header', 'body'],
variants: {
primary: {
secondary: {
dialog: {
maxW: "220px",
}
}
},
},
});
export default theme;
Then use it on the Drawer component
<Drawer variant="secondary" placement={placement} onClose={onClose} isOpen={isOpen}>
I recently added to this project, in this project they use material ui for some elements and some HTML elements for the rest of the elements. they write the style for both of them
Now they ask me to change the minimum code for changing the theme, this is the style for material ui part
// this is UserOptions.js
const chooseTheme = [theme]
const themeStyle =
localStorage.getItem('theme') === null ?
chooseTheme[0]['IGS'] : chooseTheme[0][localStorage.getItem('theme')];
const styles = theme => ({
button: {
backgroundColor: themeStyle.bkgTextColor,
color: themeStyle.dialogContentColor,
},
})
this is the textfield I used for changing the theme
<TextField
select
style ={{direction: 'center', width: '100px'}}
type= 'select'
>
<option value={'Light'}>Light</option>
<option value={'Dark'}>Dark</option>
</TextField>
and I used this code for exporting part
export default withStyles(styles)(UserOptions);
this is the Theme.js file
export const Light = {
bkgTextColor: '#19417C';
dialogContentColor: '#E7EFFA';
}
when user change the otion of the textfield, the html element color changes but i should refresh the page to see the material ui elements color changed, what should I do to make the material ui color change without using MuiThemeProvider (maybe i should redirect to this page after re-render the page and i don't know how)
So I created this button component using the following code
const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
const SIZES = ['btn--medium', 'btn--large'];
const DISPLAY = ['btn--show', 'btn--hidden'];
export const Button = ({
children,
type,
onClick,
buttonStyle,
buttonSize,
buttonDisplay
}) => {
const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle
: STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
const checkButtonDisplay = DISPLAY.includes(buttonDisplay)
? buttonDisplay
: DISPLAY[0];
return (
<Link to='/sign-up'>
<button
className={`btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonDisplay}`}
onClick={onClick}
type={type}
>
{children}
</button>
</Link>
);
So I have this button component inside of my navbar component and I also have it inside of my home page section component.
My issue is that whenever I shrink the page to mobile, I want to make the button component in the navbar to display: none and then on the home section I want it to show
What ends up happening is that since it's a component, any CSS style I add to it will go on any other page that is using the component, so basically my button disappears on the home page section when I need it to display
I tried to add an Id to the button component, but that didn't work
<Button id='nav-btn' buttonStyle='btn--outline'>
SIGN UP
</Button>
and I don't know how I'd add a custom class or id to the navbar button without it applying to all the other button components on my homepage
Hide it with an expression, e.g., { showButton && <Button /> }. If showButton is true, you'll see the button, if not, you won't.
If you want to do it via CSS, use a media-query to set display: none on whatever screen size it's supposed to disappear on.
Edit in response to the comment
#media (max-height: 960px) {
display: none;
}
That reads, "If the height is less than 960px, set this property."
If you want a "special" button that hides on a screen size, create a higher-order component that wraps your button.
const NinjaButton => () => {
// do stuff
return <Button cssOverrideProp={cssWithMediaQueryThatHides} />
}
In Button, you can conditionally apply that css,
className=`{/* your other css */ ${cssOverrideProp || ''}}`
Then you can use that button anywhere it's supposed to hide.
I have the following:
<ListItem key={name} hidden={true} aria-hidden={true}>
name
</ListItem>
but the ListItem is still showing up. How can it be hidden?
As far as I know, there is no hidden props on the ListItem component in Material-UI, so you will have to implement you own behavior to hide the ListItem :
You can not render the concerned ListItem at all.
You can render it but hide it using some CSS. See How to display and hide a div with CSS?.
I was looking to programmatically hide a Material-UI FormControl component, and found the same issue (i.e. the lack of a hidden prop).
What worked for me was to add a method that returned the appropriate class string, based on whether I wanted to show the component in question or not.
For example, with styles like:
const styles = createStyles({
...
formcontrol: {
minWidth: 120,
margin: 10
},
invisible: {
visibility: "hidden"
},
});
I added this to my component class:
getStyle() {
let cls: string;
if (this.props.whatever) {
cls = this.props.classes.formcontrol;
} else {
cls = this.props.classes.invisible + " " + this.props.classes.formcontrol;
}
return cls;
}
And then reference that from render() when creating the component I want to sometimes hide:
<FormControl className={this.getStyle()}>
...
</FormControl>
This should work for any styled MUI component.
(Side-note: the display prop appears from the docs to do this, but didn't work for me. Perhaps it works only for Box components, which happen to be what's used in all of the examples in the docs. This is worth further investigation which I have not yet spent the time to do.)