I want to change the color of my thumbs up button in Material UI. I'd like to change it to white, but right now it's blue. This is my code:
<div className={styles.like_dislike}>
<IconButton
size="medium"
sx={{ ml: 2 }}
>
{likeStatus === 1
? <ThumbUpIcon onClick={handleLike} color='primary'/>
: <ThumbUpOffAltIcon onClick={handleLike} color="primary" />
}
</IconButton>
<IconButton
size="medium"
sx={{ ml: 2 }}
>
{likeStatus === -1
? <ThumbDownIcon onClick={handleDislike} />
: <ThumbDownOffAltIcon onClick={handleDislike} />
}
</IconButton>
</div>
I have a section in my CSS file modifying MuiIcon-colorPrimary, as that is what MUI specifies to modify for icons using the primary color:
.like_dislike.MuiIcon-colorPrimary {
color: #fafafa
}
Am I doing something wrong?
Related
Here is the code and the output it's pretty self-explanatory: I am trying to build a responsive layout and for some reason the button group will bleed out of the container and even get bigger when the screen size decreases.
<Container className="container">
<Grid container>
<Grid item xs={12} md={12} lg={6}>
<Chessboard
position={tour.fen}
isDraggablePiece={isDraggable}
onPieceDrop={onDrop}
customArrows={arrows}
onSquareClick={dropPiece}
onMouseOverSquare={mouseOver}
onMouseOutSquare={mouseOut}
customSquareStyles={{ ...options }}
customBoardStyle={{
borderRadius: "4px",
boxShadow: "0 5px 15px rgba(0, 0, 0, 0.5)",
}}
customDarkSquareStyle={{ background: "#90a2ad" }}
customLightSquareStyle={{ background: "#dfe3e6" }}
/>
<ButtonGroup variant="contained" className="controls">
{isFirst ? (
<Button onClick={randomStart}>Random Start</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button
disabled={tour.completed !== null}
onClick={finishTour}
>
Complete Tour
</Button>
) : null}
{tour.completed !== null ? (
<Button onClick={visualiseComplete}>
Visualise
</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button
onClick={() =>
setArrows(genArrows(tour.visitedStr))
}
>
Show path
</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button onClick={undo}>Undo</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button onClick={reset}>Reset</Button>
) : null}
</ButtonGroup>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Moves tour={tour} />
</Grid>
</Grid>
{/* <CompletedPanel tour={tour} impossible={impossible} /> */}
</Container>
Desktop version
Mobile version
I expect the the button group to fit inside the container and become stacked vertically
Perhaps make a responsive size value with useTheme and useMediaQuery from Material UI, and try with one or more of the following approaches.
Simplified live demo: stackblitz
Import the helper hooks:
import { useTheme } from '#mui/material/styles';
import useMediaQuery from '#mui/material/useMediaQuery';
In the component, create responsive condition:
const theme = useTheme();
// 👇 Customize this with preferred breakpoints
const matches = useMediaQuery(theme.breakpoints.up('sm'));
In the output, try one or more of these approaches for responsive values:
<ButtonGroup
// 👇 Make size based on responsive value
size={matches ? "medium" : "small"}
variant="contained"
aria-label="outlined primary button group"
// 👇 Define maxWidth for the group
sx={{ maxWidth: "100%" }}
// 👇 Conditional shorter text
>
<Button>{`${matches ? "complete " : ""}tour`}</Button>
<Button>{`${matches ? "show " : ""}path`}</Button>
<Button>undo</Button>
<Button>reset</Button>
</ButtonGroup>
As an alternative option, perhaps also consider to make the ButtonGroup layout horizontal when in smaller screen size:
<ButtonGroup
size={matches ? "medium" : "small"}
// 👇 Conditional orientation
orientation={matches ? "horizontal" : "vertical"}
variant="contained"
aria-label="outlined primary button group"
sx={{ maxWidth: "100%" }}
>
<Button>complete tour</Button>
<Button>show path</Button>
<Button>undo</Button>
<Button>reset</Button>
</ButtonGroup>
below i have different icons from material UI , which currently displays a grey circle whenever i hover on any of them , i want to remove this grey circle and i want each icon to change to a specific color whenever i hover over it i looked at the documentation in material ui but couldn't find anything that explains it , appreciate your feedback.
<Box className={classes.socialmedia}>
<IconButton aria-label="twitter">
<TwitterIcon />
</IconButton>
<IconButton aria-label="facebook">
<FacebookIcon />
</IconButton>
<IconButton aria-label="instagram">
<InstagramIcon />
</IconButton>
<IconButton aria-label="Youtube">
<YouTubeIcon />
</IconButton>
<IconButton aria-label="Apple">
<AppleIcon />
</IconButton>
</Box>
In order to remove the grey circle displaying in background on hover then you can use disableFocusRipple & disableRipple property in IconButton component and set style={{ backgroundColor: 'transparent' }}.
Ex:
<IconButton
disableFocusRipple
disableRipple
style={{ backgroundColor: "transparent" }}
aria-label="twitter"
>
<TwitterIcon className={classes.twitter} />
</IconButton>
To change the color of icon on hover then use hover selector.
Ex:
const useStyles = makeStyles({
twitter: {
"&:hover": {
color: "#00acee"
}
}
});
I've created a quick example to illustrate the solution in codesandbox:
https://codesandbox.io/s/elegant-ramanujan-wnj9fw?file=/index.js:948-961
Define a hook. Import makeStyle from '#material-ui/core/styles'.
const useStyles = makeStyle(() => ({
styleRed: {
'&:hover': {
backgroundColor: '#f00'
}
},
styleBlue: {
'&:hover': {
backgroundColor: '#00f'
}
}
}));
Then in your component:
// using our hook
const {styleRed, styleBlue} = useStyles();
// some more code
return (
<>
<IconButton aria-label="twitter" classes={styleRed}>
<TwitterIcon />
</IconButton>
<IconButton aria-label="facebook" classes={styleBlue}>
<FacebookIcon />
</IconButton>
</>
)
I want to increase the size of the stepper . also want to add a horizontal line before the initial step content. how it would be possible here I am attaching my code . I have done adding width and height properties. but Its not worked. just stuck with this. how the customization is possible on this stepper component. need help. I am new to react.js and MUI.
<Stepper activeStep={activeStep} orientation="vertical">
{steps.map((step, index) => (
<Step key={step.label}>
<StepLabel
optional={
index === 2 ? (
<Typography variant="caption">Last step</Typography>
) : null
}
>
{step.label}
</StepLabel>
<StepContent>
<Box sx={{ mb: 2 }}>
<div>
<Button
variant="contained"
onClick={handleNext}
sx={{ mt: 1, mr: 1 }}
>
{index === steps.length - 1 ? 'Finish' : 'Continue'}
</Button>
<Button
disabled={index === 0}
onClick={handleBack}
sx={{ mt: 1, mr: 1 }}
>
Back
</Button>
</div>
</Box>
</StepContent>
</Step>
))}
</Stepper>
{activeStep === steps.length && (
<Paper square elevation={0} sx={{ p: 3 }}>
<Typography>All steps completed - you're finished</Typography>
<Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
Reset
</Button>
</Paper>
)}
</Box> ```
Perhaps you could add a custom css to your webpage :
.MuiStepLabel-labelContainer span {
font-size: xx-large;
}
You can adjust to your desired font size by changing the "font-size" value.
You can use a Theme.
Like so:
import { createTheme } from "#mui/material";
const theme = createTheme({typography: {fontSize: 20}});
function App(){
...
return (
<>
<ThemeProvider theme={theme}>
<Stepper ...
</Stepper>
</ThemeProvider>
...
</>
}
The lines in between are a bit of. I could not find a way to prevent this.
I have created a dropdown for the icon where when the icon is clicked, it will show the dropdown. Once we hover on Card then the three dots icon will appear. But my objective is even after showing dropdown the icon should appear. but here is my code, it is disappearing. Can anyone help me with this query?
Here is the code:
<Card>
<CardHeader
className={classes.header}
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<div>
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
style={{ marginTop: "35px" }}
id="simple-menu"
keepMounted
anchorEl={this.state.menu}
open={Boolean(this.state.menu)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>change password</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</div>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
</Card>
Here is the sample code
Create a style className which sets the icon visibility to visible. Conditionally assign the class to the parent div only when the menu is open i.e. check for this.state.menu && classes.menu.
Style
const styles = theme => ({
header: {
background: "grey",
"&:hover": {
background: "yellow",
"& $showIcon": {
visibility: "visible"
}
}
},
showIcon: {
visibility: "hidden"
},
menu: {
"& $showIcon": {
visibility: "visible"
}
}
});
JSX
<Card>
<CardHeader
className={classes.header}
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<div className={this.state.menu && classes.menu}>
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
>
<MoreVertIcon />
</IconButton>
...
Working copy of your code is here
I have a material-ui card in which it contains image, input field, check-box and a submit button. In which card is displaying onclick on some other option which is not mentioned in the below code. I want to close a card when I click on submit. How can I achieve this?
<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
<CardHeader
style={{
paddingBottom: 0,
paddingTop: 0
}}
title="Image"
/>
<img src="https://unsplash.it/200/?random" />
<CardContent className="details-card-body">
<TextField label="Name" fullWidth />
<Grid container>
<Grid item xs={4}>
<Typography>
New User
<Checkbox
checked={this.state.addNew}
name="addNew"
onChange={this.handleCheckBox("addNew")}
value="new user"
inputProps={{ "aria-label": "Checkbox B" }}
/>
</Typography>
</Grid>
</Grid>
<Button variant="contained" color="primary">
Click to Tag
</Button>
</CardContent>
</Card>
Here below is my code on CodeSandbox
https://codesandbox.io/embed/lppzx48r0m
There are multiple ways to achieve what you want to do
you'll need a flag to conditionally hide or show the card.
For example lets take flag variable in state, and change state variable flag based on submit button and on the basis of this.state.flag you can do
{this.state.flag ?
(<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
//Card content
</Card>)
:
null
}
You can also provide conditional css based on this.state.flag
<Card
className="details-card"
style={{ paddingTop: "0px", display: this.state.flag ? block : 'none'}}
color="primary"
>
//Card content
</Card>
P.S.: The second approach is not recommended because we are rendering element even if it is not needed.