We Keep Coding

How to customize Material UI autocomplete dropdown menu

I am using Material UI v5 beta1 and I have been trying to customize their Autocomplete component so that the Typography color on the options changes from black to white whenever the item is selected, however, I can't figure out how to pass the style to it.
So far I have tried passing my styles on .MuiAutocomplete-option either through a styled component or a global override (see code attached) and tried every state I can think of, hover, selected, focused, even tried the Material classes for those but none of them worked. I have also tried using a custom Popper with a MenuList inside but with no luck. I have been pulling my hair with this for a couple of days now, and not being able to inspect the DOM makes it even harder, any help or tip would be highly appreciated.
Thank you in advance.
MuiAutocomplete: {
styleOverrides: {
root: {
// ...
},
option: {
padding: '5px 12px',
backgroundColor: theme.palette.background.paper,
display: 'flex',
height: 42,
borderRadius: theme.borderRadius.s,
'&:hover': {
backgroundColor: theme.palette.action.hover,
'& .Mui-Typography-root': { color: theme.palette.text.contrast },
},
'& .Mui-selected': {
backgroundColor: theme.palette.action.hover,
'& .Mui-Typography-root': { color: theme.palette.text.contrast },
},
'&.disabled': {
opacity: 0.5,
'& .Mui-Typography-root': {
color: theme.palette.text.disabled,
},
},
},
renderOption={(props, option) => {
return (
<li {...props}>
<Box display={'flex'} flexDirection={'row'}>
<Avatar size={'32'} variant={'circular'} />
<Box display={'flex'} ml={3} flexDirection={'column'}>
<Typography color={'text.primary'}>
{option.label}
</Typography>
<Typography color={'text.secondary'}>
Extra Information
</Typography>
</Box>
</Box>
</li>
);
}}

I would pass in { selected } to your renderOption, then use it to toggle your styling inline
For example:
renderOption={(props, option, { selected }) => {
return (
<li {...props}>
<Box display={'flex'} flexDirection={'row'} style={{ backgroundColor: selected ? 'red' : 'green' }}>
<Avatar size={'32'} variant={'circular'} />
<Box display={'flex'} ml={3} flexDirection={'column'}>
<Typography color={'text.primary'}>
{option.label}
</Typography>
<Typography color={'text.secondary'}>
Extra Information
</Typography>
</Box>
</Box>
</li>
);
}}

How to customize button css in react-admin

I am new to react-admin, and how to customize react admin buttons?
In my scenario I have a list also in create, edit, and export button there and I don't know which is the best way to change button css in react-admin. Can anyone solve this?
By default I have button like above mentioned, so I need to add css for this two buttons.
Here is my sample code
// style list
const useStyles = makeStyles((theme) => ({
userCard: {
padding: "20px",
borderRadius: "12px",
},
btn_edit: {
background: "#5E35B1",
color: "#fff",
fontSize: "10px",
},
mainList: {
boxShadow: "none !important",
borderRadius: "0px",
},
listCreateIcon: {
padding: "0px !important",
},
}));
//main
export const UserList = (props) => {
const classes = useStyles();
return (
<Card className={classes.userCard}>
<List
{...props}
pagination={null}
perPage={9999}
className={classes.mainList}
>
<Datagrid className={classes.listCard}>
<TextField source="username" />
<BooleanField source="enabled" />
<ReferenceArrayField reference="_roles" source="roles">
<SingleFieldList>
<ChipField source="name" />
</SingleFieldList>
</ReferenceArrayField>
<EditButton className={classes.btn_edit} />
</Datagrid>
</List>
</Card>
);
};
export const UserCreate = (props) => {
const classes = useStyles();
return (
<Create {...props} className={classes.listCreateIcon}>
<SimpleForm style={{ padding: "0px !important" }}>
<TextInput source="username" />
<TextInput type="password" source="password" />
<ReferenceArrayInput source="roles" reference="_roles" allowEmpty>
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
<BooleanInput source="enabled" defaultValue={true} />
</SimpleForm>
</Create>
);
};
export const UserEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<TextField source="username" />
<ReferenceArrayInput source="roles" reference="_roles">
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
<BooleanInput source="enabled" />
</SimpleForm>
</Edit>
);

This will work for you.
btn_create: {
display: "inline-flex",
alignItems: "center",
gridGap: 4,
backgroundColor: "transparent",
borderColor: "transparent",
fontSize: 16,
color: "blue" // the text color you want
// if you are using the svg icon
svg : {
width: 16,
height: 16,
path: {
fill : "blue" //color code of icon
}
}
},
btn_group: {
display:"flex",
gridGap: "16px",
alignItems: "Center",
}
on Component
<div className={classes.btn_group}>
<EditButton className={classes.btn_create} />
<EditButton className={classes.btn_create} />
</div>
PS. If the icon is font icon, you may not use the svg styling.

How to change React Appbar links from purple

I have a React web app where my Appbar options have links associated with them, which underlined and turned the font purple. I also have a scroll function that changes the text color to black once I have scrolled down from the top position on the page.
I can't figure out how to make the text color white, while keeping the color change functionality on change.
Header
import React, { useEffect, useState } from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { AppBar, IconButton, Toolbar, Collapse } from '#material-ui/core';
import ExpandMoreIcon from '#material-ui/icons/ExpandMore';
import { Link as Scroll } from 'react-scroll';
import ScrollToColor from './ColorChangeOnScroll';
import Button from '#material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
root: {
fontFamily: 'Nunito',
},
appbar: {
position: 'fixed',
zIndex: '9999',
background: 'black',
},
appbarTitle: {
flexGrow: '1',
fontSize: '1vw',
},
appbarTitle2: {
flexGrow: '1',
fontSize: '1vw',
},
appbarWrapper: {
width: '80%',
margin: '0 auto',
},
icon: {
color: '#2bbcd4',
fontSize: '2vw',
},
colorText: {
color: '#2bbcd4',
},
button: {
borderRadius: 30,
background: '#2bbcd4',
},
buttontext: {
fontFamily: 'Nunito',
fontWeight: 'bold',
color: 'white',
},
rightToolbar: {
marginLeft: 'auto',
marginRight: -12,
display: 'flex',
},
}));
export default function Header() {
const classes = useStyles();
const [checked, setChecked] = useState(false);
useEffect(() => {
setChecked(true);
}, []);
return (
<section>
<div className={classes.root} id="header">
<ScrollToColor>
<AppBar className={classes.appbar} elevation={0}>
<Toolbar className={classes.appbarWrapper}>
<a
href="/landing"
>
<h1 className={classes.appbarTitle}>
Logo{' '}
</h1>
</a>
<section className={classes.rightToolbar}>
<a
href="/contact"
>
<h2
className={classes.appbarTitle2}
>
Contact Sales
</h2>
</a>
<a
href="/login"
>
<h2
className={classes.appbarTitle2}
style={{ marginRight: '50px' }}
>
Sign In
</h2>
</a>
<Button
className={classes.button}
size="large"
variant="contained"
href="/signup"
style={{ marginRight: '10px' }}
>
<span className={classes.buttontext}>
Get started for free{' '}
</span>
</Button>
</section>
</Toolbar>
</AppBar>
</ScrollToColor>
</div>
</section>
);
}
Scroll to change font color function:
import React from "react";
import { useScrollTrigger } from "#material-ui/core";
const ScrollHandler = props => {
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
target: props.window ? window() : undefined
});
return React.cloneElement(props.children, {
style: {
backgroundColor: trigger ? "white" : "transparent",
color: trigger ? "black" : "white",
transition: trigger ? "0.3s" : "0.5s",
boxShadow: trigger ? "1px 1px 1px #efefef" : "none",
padding: "10px 0px",
icon: trigger ? "black" : "white",
}
});
};
const ScrollToColor01 = props => {
return <ScrollHandler {...props}>{props.children}</ScrollHandler>;
};
export default ScrollToColor01;
I have tried adding inline styling to the text/links, and they do turn the font white & remove the underline, but it prevents the scroll function from working and as I scroll down, the text remains white (and invisible in front of a white background).
<a
href="/login"
style={{ textDecoration: 'none', color: 'white' }}
>
<h2
className={classes.appbarTitle2}
style={{ marginRight: '50px' }}
>
Sign In
</h2>
</a>
Any advice on how to change the font color from purple to white and keep the scroll color functionaility is much appreciated.

You could set a wrapper for the anchors and change the color of the wrapper instead on your scroll functionality, while setting the color of the anchors to inherit. This way the anchors will always inherit the color you set on the wrapper, even when visited.
const useStyles = makeStyles((theme) => ({
...
links: {
textDecoration: 'none',
color: 'inherit'
},
...
}));
And then for the links you simply add the class:
<a href="/contact" className={classes.links}>
<h2 className={classes.appbarTitle2}>Sales</h2>
</a>
Hope this was helpful.

How to make checkbox "Badge" in MaterialUI?

According to the API of Badge https://material-ui.com/api/badge/ there is a prop component which takes either a string to use a DOM element or a component.
In My code
<Badge color="primary" classes={{ badge: classes.badge }} component="checkbox">
<Avatar className={classes.orangeAvatar}>AP</Avatar>
</Badge>
OR
import Checkbox from '#material-ui/core/Checkbox';
<Badge color="primary" classes={{ badge: classes.badge }} component={Checkbox}>
<Avatar className={classes.orangeAvatar}>AP</Avatar>
</Badge>
In both the cases I am no getting checkbox as badge. How to do this?

Use Checkbox component. You can use component for icon props when it is not checked and checkedIcon props when it is checked.
<Checkbox
icon={<Avatar className={classes.purpleAvatar}> AP</Avatar>}
checkedIcon={<Avatar className={classes.orangeAvatar}> AP</Avatar>}
/>

I was stuck on the same problem and worked out as below.
Use badgeContent property.
badgeContent property accepts node and shows it as a badge content.
import CheckIcon from '#material-ui/icons/Check'
<Badge
color="secondary"
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
badgeContent={<CheckIcon style={{ fontSize: 10, padding: 0, color: 'white' }} />}
classes={{ badge: classes.badge }}
>
<Avatar className={classes.orangeAvatar}>AP</Avatar>
</Badge>
After that you can customize that badge content style like this.
import { Badge } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
badge: {
fontSize: 30
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<Badge
badgeContent={"h"}
color="secondary"
classes={{ badge: classes.badge }}
/>
</div>
);
}
In my case I used following style to change badge size.
badge: {
fontSize: 16,
padding: 0,
minWidth: '12px !important',
height: '12px !important',
},
More discussion about customization will be found How to change font size of material ui badge content in reactjs?.

ReactJS set display='inline' onMouseOver

I would like to set display property of a child element to inline, when there is a mouseOver or mouseEnter event in this React component.
I can see that the state is being set, but it does not change for the display property.
export class EditablePageTitle extends React.Component {
state = {
showEditIcon: 'none'
};
showEditIcon() {
console.log('showEditIcon 1 ', this.state.showEditIcon);
this.setState({ showEditIcon: 'inline' });
console.log('showEditIcon 2 ', this.state.showEditIcon);
}
render() {
return (
<FlexColumn
style={{
alignItems: 'baseline',
paddingBottom: s[3]
}}
>
<div id="page-title" onMouseEnter={() => this.showEditIcon()}>
<Input
{...this.props}
type={this.props.type || 'text'}
defaultValue={this.props.defaultValue}
disabled="disabled"
onChange={this.props.onChange}
/>
<i
className="fa fa-pencil-alt"
style={{
paddingRight: s[3],
color: '#FFFFFF',
fontSize: s[3],
display: this.state.showEditIcon
}}
/>
{console.log('this.state.showEditIcon ', this.state.showEditIcon)}
</div>
<Label>{this.props.label}</Label>
</FlexColumn>
);
}
}

Call the showEditIcon method like the following and also you should bind this:
export class EditablePageTitle extends React.Component {
constructor(props) {
super(props);
this.state = {
showEditIcon: 'none'
};
this.showEditIcon = this.showEditIcon.bind(this);
}
showEditIcon() {
console.log('showEditIcon 1 ', this.state.showEditIcon);
this.setState({ showEditIcon: 'inline' });
console.log('showEditIcon 2 ', this.state.showEditIcon);
}
render() {
return (
<FlexColumn
style={{
alignItems: 'baseline',
paddingBottom: s[3]
}}
>
<div id="page-title" onMouseEnter={this.showEditIcon}>
<Input
{...this.props}
type={this.props.type || 'text'}
defaultValue={this.props.defaultValue}
disabled="disabled"
onChange={this.props.onChange}
/>
<i
className="fa fa-pencil-alt"
style={{
paddingRight: s[3],
color: '#FFFFFF',
fontSize: s[3],
display: this.state.showEditIcon
}}
/>
{console.log('this.state.showEditIcon ', this.state.showEditIcon)}
</div>
<Label>{this.props.label}</Label>
</FlexColumn>
);
}
}

This is possibly a conflict with how Font Awesome and React handle rendering.
If you are using React we recommend the react-fontawesome package or Web Fonts with CSS.
https://fontawesome.com/how-to-use/on-the-web/using-with/react
However, you may just want to try wrapping your icon with a span and apply the display property there.
<span style={{ display: this.state.showEditIcon }}>
<i className="fa fa-pencil-alt"
style={{
paddingRight: s[3],
color: '#FFFFFF',
fontSize: s[3]
}}
/>
</span>