This is my code, the icon to open the textfield comes by default with a dark color and the background that I have is also dark, so it is hardly visible. I would like to put a white color on it. I have done it in a Textfield and it has worked for me, but being a child of Autocomplete it does not work.
const useStyles = makeStyles({
inputRoot: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "white",
borderWidth: "2px",
},
color: "white",
fontFamily: "Bebas-Bold",
fontSize: "18px",
}
})
<Autocomplete
name="countryOfBirth"
onChange={(e) => handleDateCountryUser(e)}
disableListWrap='true'
options={country}
getOptionLabel={(option) => option.name}
renderInput={(params) => (
<TextField {...params}
label="country Of Birth *"
variant="outlined"
InputLabelProps={{
classes: {
root: classes.inputs,
},
}}
/>
)}
classes={{
inputRoot: classes.inputRoot,
root: classes.inputs,
option: classes.selectFont
}}
/>
</Grid>
Related
I have an Appbar that has a fixed colour background that has been applied using the createTheme module for material-ui. I have been asked to apply a linear gradient for a transitioning color effect to the Appbar. I have tried using palette: {
background: {
paper: '-webkit-linear-gradient(to left, #30e8bf, #ff8235)',
}, in my createTheme then using sx={{ bgcolor: 'background.paper' }} in my Appbar.
Any suggestion to changes I need to make ?
import * as React from 'react'
import AppBar from '#mui/material/AppBar'
import Box from '#mui/material/Box'
import Toolbar from '#mui/material/Toolbar'
import Stack from '#mui/material/Stack'
import Button from '#mui/material/Button'
import Tabs from '#mui/material/Tabs'
import Tab from '#mui/material/Tab'
import Typography from '#mui/material/Typography'
import IconButton from '#mui/material/IconButton'
import MenuIcon from '#mui/icons-material/Menu'
import AccountCircle from '#mui/icons-material/AccountCircle'
import Switch from '#mui/material/Switch'
import FormControlLabel from '#mui/material/FormControlLabel'
import FormGroup from '#mui/material/FormGroup'
import MenuItem from '#mui/material/MenuItem'
import Menu from '#mui/material/Menu'
import CssBaseline from '#mui/material/CssBaseline'
import { ThemeProvider, createTheme } from '#mui/material/styles'
import Chip from '#mui/material/Chip'
import Check from '#mui/icons-material/Check'
const finalTheme = createTheme({
components: {
// Name of the component
MuiButton: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
fontSize: '3rem',
backgroundColor: '#fff',
},
},
},
},
typography: {
// In Chinese and Japanese the characters are usually larger,
// so a smaller fontsize may be appropriate.
fontSize: 15,
},
palette: {
background: {
paper: '-webkit-linear-gradient(to left, #30e8bf, #ff8235)',
},
},
})
export default function NavBar() {
const [auth, setAuth] = React.useState(true)
const [anchorEl, setAnchorEl] = React.useState(null)
const [value, setValue] = React.useState('apple')
const handleChange = (event) => {
setAuth(event.target.checked)
}
const handleMenu = (event) => {
setAnchorEl(event.currentTarget)
}
const handleClose = () => {
setAnchorEl(null)
}
return (
<React.StrictMode>
<Box sx={{ flexGrow: 1 }}>
<ThemeProvider theme={finalTheme}>
<AppBar position="static" sx={{ bgcolor: 'background.paper' }}>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }} />
<Tab value="0" label="Sessions" />
<Tab value="1" label="Gallery" />
<Tab value="2" label="About Us" />
{auth && (
<div>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
</Menu>
</div>
)}
</Toolbar>
</AppBar>
</ThemeProvider>
</Box>
</React.StrictMode>
)
}
I want to be able to style the the drop down background so when it opens the items behind it will become blurred any idea what class should it target ?
paper: {
backdropFilter: 'blur(14px)',
backgroundColor: 'rgba(104, 99, 99, 0.5)',
'& .MuiAutocomplete-listbox': {
'& li': { padding: 2 },
},
},
<Autocomplete
disabled={/*check?.length === 0*/ selected.group ? false : true}
id='country-select-demo'
PaperComponent={({ children }) => <Paper className={classes.paper}>{children}</Paper>}
renderInput={(params) => (
<TextField
{...params}
/>
)}
/>
If you are using MUI v5, then your Paper's API syntax is wrong. className should be classes. Or you can just use the sx prop.
PaperComponent={props => (
<Paper
{...props}
sx={{
color: '#fff',
background: 'rgba(104, 99, 99, 0.5)',
backdropFilter: 'blur(14px)',
}}
/>
)}
MUI v4 Codesandbox
New to Material UI I'm building a navigation component while reading through the docs and I ran across Buttons with icons and label. Wanting to build a button I created my component but there is a large gap between the text and icon.
Button:
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
Menu
</Button>
When I review button in the browser the rendered element is:
<span class="MuiButton-endIcon">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
</span>
followed with the CSS of:
.MuiButton-endIcon {
display: inherit;
margin-left: 8px;
margin-right: -4px;
}
Wanting to modify the CSS of the margin left I attempted to target MuiButton-endIcon:
navBtn: {
color: '#363537',
verticalAlign: 'middle',
'&:hover': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
},
'&:focus': {
boxShadow: 'none',
},
MuiButtonEndIcon: {
marginLeft: '2px',
},
},
which did not work. The only hack I can get to work is to add a span with inline styling:
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>
the full component:
import React from 'react'
// Material UI
import { Button } from '#material-ui/core'
import MenuIcon from '#material-ui/icons/Menu'
// Styles
import useStyles from '../styles'
const NavIcon = ({ selected }) => {
const { navBtn } = useStyles()
return (
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>
)
}
export default NavIcon
Research:
Align material icon vertically
How to Align tab-label and tab-icon horizontally in material-UI using Tabs API
Centered icon and text (React Material-UI)
Material UI - Align icon to center with the Typography text
In Material UI is there a way to modify the margin from the <MenuIcon /> to the text with a <Button /> without implementing an inline style hack on the text?
Edit
Per the answer that mentioned spacing I tried the following:
on <Button>:
<Button
m={1}
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
Menu
</Button>
on <MenuIcon>:
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon m={1} />}
>
Menu
</Button>
styling:
navBtn: {
color: '#363537',
'&:hover': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
},
'&:focus': {
boxShadow: 'none',
},
},
and there is no effect on the margin to the component. My understanding from the docs for spacing to work I would need to build a theme.
for every component of the material-ui, they take a classes prop, by which you can target the inside classes directly. For endIcon, button receives a style object to endIcon key in classes prop.
App.js
import React from 'react'
// Material UI
import { Button } from '#material-ui/core'
import MenuIcon from '#material-ui/icons/Menu'
// Styles from style.js
import styles from './styles'
const NavIcon = ({ selected }) => {
const classes = styles()
return (
<Button
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
classes={{endIcon:classes.endIcon}}
endIcon={<MenuIcon />}
className={classes.navBtn}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>
)
}
export default NavIcon
styles.js
import { makeStyles, createStyles } from '#material-ui/core/styles';
const useStyles = makeStyles(() =>
createStyles({
endIcon:{
marginLeft:'4px'
},
navBtn: {
color: '#363537',
'&:hover': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
},
'&:focus': {
boxShadow: 'none',
},
},
}),
);
export default useStyles
Add the required margin in endIcon class.
Documentation
From the Spacing docs
In order for it to work you have to wrap the element you want in a so called "Box"
import Box from '#material-ui/core/Box';
You can specify a prop called "m" to the Button, for example:
<Box m="5px"> <Button /> </Box>
This adds 5 pixels to the overall margin of the button, but if you want to apply only margin to the left you can do:
<Box ml="5px"> <Button /> </Box>
Is there any way to change the background color of material-ui tab indicator on hover and the active state of Tab.
Default state
On hover I would like to style tab indicator like this
I couldn't find any way using css to modify like this. Any help on this would be greatly appreciated. Thank you.
You need to specify the style rules for the tab indicator and hover/selected-state tab, here's the demo:
const useStyles = makeStyles((theme) => ({
indicator: {
backgroundColor: "yellow",
},
tabRoot: {
"&:hover": {
color: "yellow",
opacity: 1
}
},
selectedTab: {
color: "yellow"
}
}));
<Tabs classes={{ indicator: classes.indicator }}>
<Tab
classes={{ root: classes.tabRoot, selected: classes.selectedTab }}
label="Item One"
/>
<Tab
classes={{ root: classes.tabRoot, selected: classes.selectedTab }}
label="Item Two"
/>
<Tab
classes={{ root: classes.tabRoot, selected: classes.selectedTab }}
label="Item Three"
/>
</Tabs>
Hi I want to style three buttons with different colors but When those buttons are disabled the custom style I've added at the beginning overrides the default style disabledTextColor, which adds a default fade and transparency value, so users can see that the button is disabled. How can style the disabled state or which should be the correct way to style the labelStyle and/or disabledTextColor? Here is an example
const style = {
labelStyle: {
color: 'red;
}
}
<FlatButton
label='Mit Linkedin anmelden'
labelPosition='after'
icon={<LinkedinIcon />}
onClick={() => Meteor.loginWithLinkedin()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
<div className='mdl-cell mdl-cell--12-col'>
<FlatButton
label='Mit Google anmelden'
labelPosition='after'
icon={<GoogleIcon />}
onClick={() => Meteor.loginWithGoogle()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
in this case the button always stays red even though the disabled state in True
You can create a little wrapper component around FlatButton that conditionally fades the labelStyle when the button is disabled.
const CustomFlatButton = (props) => (
<FlatButton
{...props}
labelStyle={{ ...props.labelStyle, opacity: props.disabled ? 0.3 : 1 }}
/>
);
...
<CustomFlatButton label="Disabled Red" style={{ color: 'red' }} disabled />
https://jsfiddle.net/6rads3tt/2/