and here is the code trying to achieve the above. however the issue is the additional square frame over the <HighlightOffTwoTone /> icon:
import { Chip, IconButton } from '#mui/material'
import { HighlightOffTwoTone } from '#mui/icons-material'
const myChip = () => {
return (
<Chip
sx={{
borderColor: '#EBFFEC',
color: '#009405',
backgroundColor: '#EBFFEC',
}}
label='Chip Text'
deleteIcon={
<IconButton>
<HighlightOffTwoTone
sx={{ color: '#fff', backgroundColor: '#A2E8A5' }}
/>
</IconButton>
}
onDelete={() => console.log('clicked')}
/>
)
}
how to get rid of the square frame background on the <HighlightOffTwoTone />?
The quickest solution is you can add borderRadius: '100%' in your HighlightOffTwoTone sx property like the code below.
<Chip
sx={{
borderColor: "#EBFFEC",
color: "#009405",
backgroundColor: "#EBFFEC"
}}
label="Chip Text"
deleteIcon={
<IconButton>
<HighlightOffTwoTone
sx={{
color: "#fff",
backgroundColor: "#A2E8A5",
borderRadius: "100%", // Add the border radius here
}}
/>
</IconButton>
}
onDelete={() => console.log("clicked")}
/>
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>
)
}
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>
I have a staff monitoring project that contains many components and among these components is "creating a workspace" and how clear in the picture I made a component and put many elements in it, but the problem is that the "TextField" I want it to be until the end of the page And although I put "Full Width", it is only complete in the middle.
How can I solve the problem?
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
resize:{
fontSize:24
}
}),
);
const Settings: FC = () => {
const classes = useStyles();
return (
<div className={classes.root}>
{/*<Container maxWidth="lg" style={{backgroundColor: 'red'}}>*/}
<Grid container direction="row">
<Grid item>
<Avatar style={{width: '5rem', height: '5rem'}} alt="Remy Sharp"
src="/static/images/avatar/1.jpg"/>
</Grid>
<Grid item >
<TextField
fullWidth
name="workspaceName"
placeholder="Workspace Name"
variant="standard"
style={{
paddingLeft: '1.4rem',
transition: ' all .2s cubic-bezier(.785,.135,.15,.86) 0s',
display: 'flex',
alignItems: 'center',
flexGrow: 1,
position: 'relative',
color: '#828588',
}}
InputProps={{
classes: {
input: classes.resize,
},
}}
defaultValue="nameeeee"
/>
</Grid>
</Grid>
<Grid container spacing={5} direction="row" mt={14}>
<Grid item xs>
<Button style={{
minWidth: '10rem',
fontSize: '1.5rem',
height: '44px',
fontWeight: 400,
textShadow: 'none',
color: '#fd71af',
border: 0,
background: 'none'
}}>Delete Workspace</Button>
</Grid>
<Grid item >
<Button
color="primary"
component={RouterLink}
to="/dashboard/workspaces/1"
variant="contained"
style={{
minWidth: '13rem',
minHeight: '4.3rem',
fontSize: '1.4rem',
backgroundColor: '#7b68ee',
borderRadius: 6,
marginLeft:'60rem'
}}
>
Saved
</Button>
</Grid>
</Grid>
{/*</Container>*/}
</div>
);
}
export default Settings;
The fullWidth attribute sets the width to 100% of its parent. Its parent (The <Grid> component) isn't occupying the full space. Add css style { flexGrow: 1 } to the <TextField>'s <Grid> parent or set the xs attribute for the <Grid>
Check this part of the docs for reference
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>
I've been trying to figure out how to lessen the gap using css with no luck. I created the style object and used leftPosition key but the result was not the one I expected. I was expecting that the text is the only thing that will move. However, if you look at the screenshot specifically the first menu, the icon also moved. What I'd like to achieve is reduce the gap between the svn icon and the text.
import React from 'react';
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import ActionGrade from 'material-ui/lib/svg-icons/action/grade';
import ActionInfo from 'material-ui/lib/svg-icons/action/info';
import ContentInbox from 'material-ui/lib/svg-icons/content/inbox';
import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts';
import ContentSend from 'material-ui/lib/svg-icons/content/send';
import Divider from 'material-ui/lib/divider';
import Assignment from 'material-ui/lib/svg-icons/action/assignment';
import Settings from 'material-ui/lib/svg-icons/action/settings';
import ManageDB from 'material-ui/lib/svg-icons/content/unarchive';
const style = {
menu: {
marginRight: 32,
marginBottom: 32,
float: 'left',
position: 'relative',
zIndex: 0,
width: 235,
},
rightIcon: {
textAlign: 'center',
lineHeight: '24px',
},
width: {
width: 235
},
leftPosition: {
left: 50
}
};
const LeftNavigation = () => (
<div>
<List>
<ListItem style={style.leftPosition} primaryText="Logs" leftIcon={<Assignment />} />
<ListItem primaryText="Manage DB" leftIcon={<ManageDB style={style.gap}/>} />
<ListItem primaryText="Top Issues" leftIcon={<ContentSend style={style.gap}/>} />
<ListItem primaryText="Settings" leftIcon={<Settings style={style.gap}/>} />
<ListItem primaryText="Logout" leftIcon={<ContentInbox style={style.gap}/>} />
</List>
<Divider />
<List>
<ListItem primaryText="All mail" rightIcon={<ActionInfo />} />
<ListItem primaryText="Trash" rightIcon={<ActionInfo />} />
<ListItem primaryText="Spam" rightIcon={<ActionInfo />} />
<ListItem primaryText="Follow up" rightIcon={<ActionInfo />} />
</List>
</div>
);
export default LeftNavigation;
The accepted solution didn't work for me. Here is what I ended up doing after exploring the DOM.
const useStyles = makeStyles((theme) => ({
icon: {
minWidth: '30px',
}
}));
and then apply this class for the ListItemIcon as:
<ListItemIcon className={classes.icon}> <HelpOutlineIcon/> </ListItemIcon>
Hope it helps someone save time.
You can add style in ListItemIcon.
<ListItemIcon style={{minWidth: '40px'}} >
This is what worked for me. I set this in my global css file.
.MuiListItemIcon-root {
min-width: 40px !important;
}
If you want to do it globally use overrides in createMuiTheme
const theme = createMuiTheme({
overrides: {
MuiListItemIcon: {
root: {
minWidth: 40,
},
},
},
})
Note:
If you're using MUI version 5 then locate createTheme instead of createMuiTheme
This is my 2¢:
<ListItemText primary={<div style={{ margin: -25, marginTop: -7, color: 'white', fontSize: 11 }}>Your text here</div>} />
Adjusting margin (n.b., it's a negative number) and the top margin you can align the icon (on the left) with your text
You can also use sx prop instead of style, if you want access to the theme object, e.g.:
<ListItemIcon sx={{minWidth: (theme) => theme.spacing(4)}}>
This is only applicable to Mui 1.x.x. For later versions, please see responses to this answer below.
The ListItem renders a div called innerDiv with 72px left/right padding to render the left/right icon and label with sufficient space. You should try this in the Style -
<ListItem innerDivStyle={{paddingLeft: 60}} primaryText="Logs" leftIcon={<Assignment />} />
Replace 60 with whatever pleases you.
Just information for #Adam Mańkowski 's answer.
In MUI v5.5, you can config your theme like this.
createTheme({
components: {
MuiListItemIcon: {
styleOverrides: {
root: {
minWidth: 0
}
}
}
}
});