I'm trying to utilize the Autocomplete component from React Material-UI in my Website and I've already managed to customize the appearance of the List-Elements to display with a dark background, as you can see in this image:
The problem is that I cannot figure out how to style the group-labels of this list. In this project, I have to use class-components so I cannot use a solution that uses React-Hooks. I guess I could somehow achieve it by overriding the CSS of this Component, but I can't figure out how.
I already tried solving this by using the createMuiTheme() function and overriding the MuiListSubheader styling, but sadly this also didn't work.
In the documentation I saw that the Autocomplete component has a "groupLabel" key within the "classes" prop, but for some reason I can only enter a string into this key.
I managed to style the list items by using the "PaperComponent" Prop of the Autocomplete component, but I couldn't find a similar solution for the list subheaders.
Thanks in advance for any help!
I managed to do it by passing a PopperComponent to the Autocomplete like so :
<Autocomplete PopperComponent={StyledPopper}></Autocomplete>
This StyledPopper is defined as such with MUI v5 styled components :
const StyledPopper = styled(Popper)(({ theme }) => ({
'& .MuiAutocomplete-groupLabel': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
},
}));
You can also style the paper in it with '& .MuiAutocomplete-paper'
Related
I'd like to change the color behind the dropdown options in my Material UI Autocomplete component.
I've reviewed the below sources, but they only describe how to use the renderOption prop to render the option text itself, which results in something like the below picture:
Change the color of Material UI Autocomplete option
How render a list of options with renderOption in material UI
Instead, I want the entire option rectangle to be a certain color. The entire rectangle encasing the dropdown options would be the color, not just the little bit surrounding the option text. I expect this to require some intelligent css styling, as it doesn't seem to be offered as a prop on the Autocomplete component, but I can't figure out the proper syntax/rules to change.
Bonus if you also explain how this could be done as global override. I've been unable to add an override, like this, even after extending the default theme. (See why extending the theme would be necessary here.)
You can do this by using the classes property of Autocomplete.
Checkout the CSS section of https://material-ui.com/api/autocomplete/
Here is an incomplete example that will hopefully help you get started.
const useStyles = makeStyles((theme) => ({
option: {
backgroundColor: 'red'
}
}));
<Autocomplete
classes={{
option: classes.option
}}
/>
I am not sure how you would do this as a global override.
I have my react app inside which i want to use vaadin-date-picker (v. 4.0.5).
I want to change some of the date pickers in a way that they would be above my modal by changing z-index to 1100 (for example)
and some to stay at 200.
In some examples, people put <style> tag inside
<vaadin-date-picker></vaadin-date-picker>
But react is not recognizing <style> attribute inside render function.
I can set class for
<vaadin-date-picker class='my-class'>
but it only changes control itself and not the backdrop part. Is there a way to change styles of some web components inside react app?
Make sure you are importing the file correctly
import './yourcssfile.css'; // if in same directory
also in react classes are applied using className keyword
<vaadin-date-picker className="my-class">
and lastly you have to follow the documentation vaadin. you can't add your own styles if the vaadin-date-picker doesn't support it.
Here in their documentation it says Vaadin Date Picker comes with both Lumo and Material design themes, and it can be customized to fit your application.
The cleanest way to use styles in my opinion is to use CSS files, so
import './classname.css';
Would be my default answer. However, if you want to set styles explicitly in your Component, these are two examples, how you can do it:
class Example extends Component {
getStyle1 = () => {
return {
fontWeight: 'bold'
};
}
render () {
return (
<div><div style={this.getStyle1()}>style1</div>
<div style={style2}>style2</div></div>
)
}
}
const style2 = {
fontStyle: 'italic'
}
Remember that it's JavaScript objects that you return with your styles, so you don't use CSS syntax with dashes (e.g. you type backgroundColor instead of background-color) and all values must be put in quotes.
I have been creating a set of reusable components that I had been styling using classes prop to override the MUI classnames. I then extracted a lot of the common styling into a theme to avoid repetition in the more complex components. The theme is wrapping each of the components using the withTheme HOC.
I am now realising that there are places we need to override the style for one-off cases. I thought I should be able to do this using the withStyles HOC but it doesn't seem to work for me.
Codepen at https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-0m9cm
MyReusableThemedComponent - is the reusable component (that is really just wrapping Material UI tabs with a theme)
CustomOverideTabs - is my implementation of the MyReusableThemedComponent where I am trying to override the Material-UI textTransform by making the text lower case.
const StyledTabs = withStyles({ root: { textTransform: "lowercase" } })(
MyReusableThemedComponent
);
I believe the transform: uppercase is the default for the MuiTab-root class, but even specifying it in the theme doesn't seem to make a difference.
TIA
The effect of withStyles is to inject a classes prop into the wrapped component (MyReusableThemedComponent in your case), but you aren't doing anything with that injected prop except passing the entire props object to useStyles during the creation of tabsStyle. This will merge the two sets of classes, but then you would need to leverage tabsStyle.root somewhere to have any effect.
You have the following code for rendering the Tab elements:
<Tab
key={index}
label={tab.tabTitle ? tab.tabTitle.toString() : "tab" + { index }}
disabled={tab.disabled}
classes={{
root: tabsStyle.tabRoot,
selected: tabsStyle.selectedTab
}}
/>
This is leveraging tabsStyle.tabRoot as the root class, but tabRoot hasn't been defined anywhere. The textTransform works as intended if you change this to root: tabsStyle.root, or if you leave the Tab rendering unchanged, you can get it to work by changing the rule name in your withStyles call to be tabRoot (e.g. withStyles({ tabRoot: { textTransform: "lowercase" } })).
Example using tabsStyle.tabRoot (i.e. only changing the withStyles argument): https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-fxybe
Example using tabsStyle.root (i.e. only changing how the classes prop is specified when rendering the Tab elements): https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-ptj87
A separate issue in your sandbox is that you appear to be trying to specify style overrides in the theme in ConditionalThemeWrapper, but the structure of the theme is incorrect. The MuiFab and MuiTab entries in the theme should be within an overrides key. Here is a modified version of your sandbox demonstrating this: https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-ju296
Related documentation:
https://material-ui.com/customization/components/#global-theme-override
I have four classnames, lets call them red-0, red-1, blue-0, blue-1
The CSS for red-0 and red-1 is the same, and the CSS for blue-0 and blue-1 is the same.
My React component are changing the classNames just as I want. My problem is that it seems like the React component ignores the CSS styling when I apply a classname with the same CSS it had right before the state change. Is this an actual case? Because my CSS changes perfectly when it goes from e.g. red-0 to blue-0, but not from red-0 to red-1.
If you have a suggestion of how I can solve this problem, I would be greatful.
A buddy helped me:
The trix was to add a promise and first set the state to an empty classname, and then add the classname that i wanted inside the promise, like this:
this.setState({ className: '' }, () => this.setState({ className: 'red-0' }));
The reason for having four classnames instead of two was because I hoped the classname change would trigger a new animation, but it did not, even though it triggered new regular CSS changes. I ended up using only two classnames: red and blue
I'm trying to understand how to customize a theme completely.
material-ui guidelines/docs say to check this file:
https://github.com/callemall/material-ui/blob/master/src/styles/theme-manager.js
So to a custom theme I tried adding a block like:
AppTheme = {
appBar: {
color: Colors.yellow500,
textColor: 'white'
},
but that has no effect on the app bar. The rest of the theme variables do work tho.
How do I customize the other variables in this file?
I just checked the properties that you mentioned and everything work properly with appBar.
The quickest way to check any props in Material-UI theme is to see the
storybook-addon-material-ui demo page!
(You can find appBar props at the right sidebar and play with colors.)
so it should work!