How can I specify a custom elevation for a MUI Button?
In MUI Button API documentation a disableElevation is documented (which seems to works as an alias of elevation={0}) but I can't find how I can specify an elevation different from the default one.
Keep in mind that contained buttons use different elevation when hovered and when active/focused, so you need to take that into account when you customise them.
#mui/system has a convenient way of applying shadows on elements without the elevation prop, using the sx prop. The syntax is sx={{ boxShadow: 3 }}, which is the same as elevation={3}. The numbers go from 0 to 24.
Codesandbox
Related
I want to style my custom React/MUI components by default, but still have the parent MUI ThemeProvider be able to override my styles.
For example, let's say that I have a Button that is green by default (styled in my code), but it should be able to have the colour overridden by a default theme passed down via ThemeProvider.
I can't seem to find anyway to do it as any styling I apply in my component becomes the default as it's the last in the CSS/styling tree.
I couldn't find much information in the documention or github issues about that topic — I can just tell you how to cope with the situation and how it works currently in v5.
It seems like the priority is as follows:
sx > styled() > theme
ie. sx has the highest priority.
At first it seems quite strange that you cannot overwrite something with your theme, but on the other hand you'd also like to be able to overwrite the theme with sx occasionally. So to me the priority makes sense.
You should not use !important in the theme if possible, because it prevents sx and styled() from doing its job.
What you'd do is ship reusable components unstyled (no styled() or sx) and style them via the theme.
Perform the colorization in the theme. Width, height, margins and paddings you can also define via styled() and/or sx if you don't need to change those in the theme.
I am new to material UI and react js, I just tried to add 2 buttons, one is with primary color, and another with Primary-light. How can I do that
I am using emotion library. This is what I tried it. I am not trying to change of the default color of primary-light, I wants to use the default primary-light color to my button
<Button variant="contained" >Primary Button</Button>
<Button variant="contained" color="secondary" >secondary Button</Button>
the above 2 buttons are working as expected.
<Button variant="contained" color="primary-light" >secondary Button</Button> //I know the syntax is wrong.
How to do this?
"primary-light" is not one of the supported colours by MUI buttons.
Which you can see in the documentation here here
You have a few options:
Manually override the style of this button. (not ideal).
Make a class that specifies the colour you want and provide the hex colour code as the background colour. (also not ideal).
Make a JSX class using makeStyles that takes the app's theme as an argument and provide the primary.light colour directly from your theme. (I'm not sure if this is outdated in version 5 of material UI but it is how you would usually do it in v4).
In your case it's probably easiest to take a quick look at the documentation Here Which shows how to customize colours on buttons using your theme and the styled function which is imported from mui/material/styles.
I had to create "primaryLight" color property in theme object so I could use. Also had to add types in order to Button can accept "primaryLight".
I used this document
A hacky workaround would be to use the defined theme color and then overwrite with sx prop.
<Button
color={'primary'}
variant='contained'
onClick={() => toggle(true)}
sx={{width: '100%', bgcolor: 'primary.dark', '&:hover': {bgcolor: 'primary.light'}}}
>
comments
</Button>
I believe this is prevented by design.
Button components are meant to get a color, and use the color main key.
You may use ButtonPropsColorOverrides to allow more color values, which is useful when you add more colors to the theme, but still - you'll get the color's main key, and cannot access other color keys.
I believe this design is meant to keep the color system integrity. You're not supposed to use primary.light key since it may be used for other effects (like hover).
Note that you can use inner color keys for some other components, like typography:
<Typography variant="body2" color="primary.light">Hello</Typography>
I'm trying to build a React component that includes react-select as child element of a flex container which, in turn, may contain other elements of variable size.
The main problem is that I'm currently not able to limit react-select to the width of the parent flex container. This is what happens when the label of the selected option is too long:
Is there a way (any way really) to prevent react-select from overflowing?
Some issues that might be related to this are:
https://github.com/JedWatson/react-select/issues/323
https://github.com/JedWatson/react-select/issues/1127
Full sample below:
As suggested here, simply styling the react-select component with minWidth: '0px' does the job.
I want to create a material-ui stepper element which looks like this:
They call it stepper element with alternative label placement.
I am using material-ui library which implements Google's Material Design. Right now all examples from that library show in-line label placing and I don't see any property which would make it possible to use alternative label placement. But I believe it was implemented at some point of time because there was discussion about it.
Is there a way to set alternative label placement for stepper right now?
According to their docs Labels can be placed below the step icon by setting the alternativeLabel prop on the Stepper component.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle