I am trying to reduce gap between stars but no luck.
Code below for your ref
<MuiThemeProvider >
<Rating
onChange={() => console.log('onChange')}
value={4}
max={5}
iconFilled={<ToggleStar color={colors.green500} />}
iconHovered={<ToggleStarBorder color={colors.green500} />}
iconNormal ={<ToggleStarBorder color={colors.black300}/>}
className={classes.Rating}
spacing ={0}
onChange={(value) => console.log(`Rated with value ${value}`)}
/>
</MuiThemeProvider >
How can I resolve this?
Use the itemStyle and itemIconStyle props:
const smallDistanceStyle = {
width: 30,
height: 30,
padding: 5
}
const iconStyle = {
width: ...,
height: ...
}
<Rating
itemStyle={smallDistanceStyle}
itemIconStyle={iconStyle}
...
/>
I know this question was asked a while ago, but I found that
<Rating
value={5}
readOnly
sx={{
fontSize: "5rem",
"& .MuiRating-icon": {
width: '4.5rem'
}
}}
icon={<StarRateIcon fontSize="5rem" sx={{ color: "black" }} />}
/>
worked for me. It was able to bring the stars a little closer together.
Related
I tried creating a custom MUI Text field with the following code:
const CustomTextField = styled(TextField)(() => ({
height: '56px',
width: '505px',
'& input + fieldset': {
borderRadius: '12px',
borderColor: 'white',
color: 'black'
}
}));
export function SearchTextField(props: TextFieldProps): JSX.Element {
return (
<CustomTextField
style={{ width: '505px' }}
InputProps={{
style: {
height: '56px'
},
startAdornment: (
<InputAdornment position="start">
<SearchOutlined fontSize="medium" color="info" />
</InputAdornment>
)
}}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
}
When I add a background to the same, the input and the icon I have added is disappearing. I can still type and the input is still being taken but I can't see them.
It's supposed to look like this
But looks like this
Any kind of help is appreciated
I'm trying to customize the tooltip appearance and the position of the speed dial but get an error when doing both.
const useStyles = makeStyles((theme) => ({
root: {
height: 380,
transform: "translateZ(0px)",
flexGrow: 1,
},
speedDial: {
position: "absolute",
bottom: theme.spacing(2),
right: theme.spacing(0),
},
tooltip: {
backgroundColor: "#37517e",
fontSize: "1.1em",
},
}));
<SpeedDial
ariaLabel="Tutor SpeedDial"
className={classes.speedDial}
icon={<SpeedDialIcon openIcon={<EditIcon />} />}
onClose={handleClose}
onOpen={handleOpen}
open={open}
>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
TooltipClasses={classes}
onClick={handleClose}
/>
))}
</SpeedDial>
The code actually compiles and works but I get a console error
index.js:1 Material-UI: The key speedDial provided to the classes prop is not implemented in ForwardRef(Tooltip).
You can only override one of the following: popper,popperInteractive,popperArrow,tooltip,tooltipArrow,arrow,touch,tooltipPlacementLeft,tooltipPlacementRight,tooltipPlacementTop,tooltipPlacementBottom.
It's pretty clear that the issue is because ToolTipClasses cannot override the speedDial class but I'm not sure how else to do it.
Any guidance will be much appreciated
Thanks
I came up with solution by by creating a StyledSpeedDial instead so that I could remove the speeddial onbject from the classes style
const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({
position: "absolute",
"&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft": {
bottom: theme.spacing(2),
right: theme.spacing(0),
},
}));
<StyledSpeedDial
ariaLabel="Tutor SpeedDial"
icon={<SpeedDialIcon openIcon={<EditIcon />} />}
onClose={handleClose}
onOpen={handleOpen}
open={open}
>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
TooltipClasses={classes}
onClick={handleClose}
/>
))}
</StyledSpeedDial>
I am using material ui accordion in my reactjs project. Here I am facing a problem when accordion opens I want to focus on the top of accordion detail content. I tried adding scrolling it to top but this does not seems to be working.
Here are my Code
<Accordion
key={i + 1}
square
expanded={expandAccordion === `panel${i + 1}`}
onChange={handleChange(`panel${i + 1}`, item.id)}
>
<AccordionSummary
classes={{
root: classes.accordionSummery,
}}
id="accSummery"
className={classes.expansionPanel}
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1d-content"
id="panel1d-header"
>
<Typography noWrap={true} className={classes.itemHarm}>
<Chip
label={item.harm}
color={item.harmColor}
style={{
backgroundColor: `${item.harm_color}`,
width: "100%",
minWidth: "100px",
color: "#ffffff",
}}
/>
<Typography style={{ flex: 1 }} />
</Typography>
</AccordionSummary>
<AccordionDetails>
<div style={{ width: "100%" }}>
{dispensingDetailLoading ? (
<div
style={{
display: "flex",
width: "100%",
justifyContent: "center",
}}
>
<CircularProgress color="primary" />
</div>
) : (
<div ref={detailRef}>
<DetailComponent data={slide1} />
<DetailComponent data={slide2} />
<DetailComponent data={slide3} />
<DetailComponent data={slide4} />
<DetailComponent data={slide5} />
<DetailComponent data={slide6} />
<DetailComponent data={slide7} />
</div>
)}
Here is on change
const handleChange = (panel, id) => (event, newExpanded) => {
setExpanded(newExpanded ? panel : false);
// passing props to parent component
handleAccordionChange(id, newExpanded, panel);
if (newExpanded === true) {
getDispensingData(id);
setSlides(0);
}
onFocusView();
};
const detailRef = useRef();
const onFocusView = () => {
const scrollHeight = window.pageYOffset - window.innerHeight;
const h = window.scrollY - detailRef.current.clientHeight;
// const h = window.scrollY - detailRef.current.offsetTop;
console.log("detailRef", detailRef);
window.scrollTo({
top: scrollHeight ,
left: 0,
behavior: "smooth",
});
};
I have defined three backgroundColor in the style theme.
avatar: {
backgroundColor: red[500],
},
orangeAvatar: {
margin: 10,
color: '#fff',
backgroundColor: deepOrange[500],
},
purpleAvatar: {
margin: 10,
color: '#fff',
backgroundColor: deepPurple[500],
},
When ever the Avatar is loaded I would like to select one of them randomly.
<Card>
<CardHeader
avatar={
<Avatar id="av" aria-label="Recipe"
className={classes.avatar}>{this.props.userName.charAt(0).toLocaleUpperCase()}
</Avatar>}
title={this.props.userName} disableTypography={true}/>
<CardActionArea disabled={this.state.images.length == 1 ? true : false}>
<CardMedia
id={this.props.ownerId}
className={classes.media}
image={this.state.images[this.state.imageIndex]}
onClick={this.handleOnClick}
/>
</CardActionArea>
</Card>
Any advice how to do this?
Thank you
Several ways to do what you want. My suggestion: put the 3 classes in an array, pick a random number between 0 and 2 every time, and assign that class name:
<Avatar className={classes[Math.floor(Math.random() * 3)]}.../>
I was presented with the same need, perhaps this solution will also serve you, there is a function to generate the color at random and then call the function from the online style.
const useStyles = makeStyles((theme: Theme) =>
createStyles({
large: {
fontSize: "2.5rem",
width: 100,
height: 100
}
})
);
function randomColor() {
let hex = Math.floor(Math.random() * 0xFFFFFF);
let color = "#" + hex.toString(16);
return color;
}
...
return (
<Avatar
variant="square"
src={imageSrc}
alt={alt}
className={classes.large}
style={{
backgroundColor: randomColor()
}}
/>
)
ref:
Javascript random color
Avatar random backgroundColor on fallback
let classNameHolder = ["avatar","orangeAvatar","purpleAvatar"];
<Card>
<CardHeader
avatar={
<Avatar id="av" aria-label="Recipe"
className={classNameHolder[Math.floor(Math.random() * 3)]}>{this.props.userName.charAt(0).toLocaleUpperCase()}
</Avatar>}
title={this.props.userName} disableTypography={true}/>
<CardActionArea disabled={this.state.images.length == 1 ? true : false}>
<CardMedia
id={this.props.ownerId}
className={classes.media}
image={this.state.images[this.state.imageIndex]}
onClick={this.handleOnClick}
/>
</CardActionArea>
</Card>
I'm implementing a BottomNavigation bar for mobile. I want the label texts to be UPPERCASE and add 5px to spacing to icon above.
<BottomNavigation
value={selectedTab}
onChange={this.handleTabChange}
className={classes.bottomNav}>
<BottomNavigationAction
label="Details"
value={0}
icon={<DescriptionIcon />}
className={classes.bottomNavLabel}
/>
<BottomNavigationAction
label="Card"
value={1}
icon={<CreditCardIcon />}
disabled={!navEnabled}
className={classes.bottomNavLabel}
/>
</BottomNavigation>
My styles look like this:
export default ({ spacing, breakpoints }: Theme) =>
createStyles({
bottomNav: {
position: 'fixed',
bottom: 0,
width: '100%',
},
bottomNavLabel: {
textTransform: 'uppercase',
marginTop: 5,
},
})
I tried styling in bottomNavLabel class but it's hitting the whole button element. I only want to hit the <span> element with the label inside.
According to docs i can override classes.label but I can't get it to work. I suspect this means I create a wrapper component around BottomNavigationAction but I would prefer not to do this, as I'm not using this elsewhere and it feels kind of "bloated" to do.
How do I do that?
I figured it out. <BottomNavigationAction> takes a prop classes where I define the label styling. Like this:
<BottomNavigation
value={selectedTab}
onChange={this.handleTabChange}
className={classes.bottomNav}>
<BottomNavigationAction
label={<span className="bottomNavLabel">Details</span>}
value={0}
icon={<DescriptionIcon />}
classes={{label: classes.label}}
/>
<BottomNavigationAction
label={<span className="bottomNavLabel">Card</span>}
value={1}
icon={<CreditCardIcon />}
disabled={!navEnabled}
classes={{label: classes.label}}
/>
</BottomNavigation>
And styling:
export default ({ spacing, breakpoints }: Theme) =>
createStyles({
bottomNav: {
position: 'fixed',
bottom: 0,
width: '100%',
},
label: {
textTransform: 'uppercase',
marginTop: 5,
},
})