I am using material ui checkbox, i wanted it to have its own background color over my div which has colored background. I have set the root to have a backgroundColor as white but the svgicon is a round shape which is not the look i intend to have. Can i shape the checkbox ?
Already have tried many things but not able to figure out how to change the icon
const styles = {
root : {
padding : '0px',
display : 'inline-block',
backgroundColor : 'white'
},
formLabelRoot : {
margin : '0'
}
}
.
.
.
render () {
const { classes } = this.props
return(
<div style={customStyles.divStyle}>
<div style={customStyles.div1}>
<FormControlLabel
classes={{root: classes.formLabelRoot}}
control={
<Checkbox
classes={{root : classes.root }}
color='primary'
/>
}
label={''}
/>
</div>
The background white is making a spherical rounded checkbox apparent
Image of what is happening now
You can override the icons used for the checked and unchecked states. The props you're looking for are icon for the unchecked state and checkedIcon for the checked state. Both of which take a component to be used as the icon.
Documentation here
You might have to make a compromise here if you don't want to go making your own icons.
Something like this is possible without changing the icons. If you're looking for a solid white box with a grey outline as the unchecked box, you might have to provide that svg yourself because I don't see anything like it in #material-ui/icons.
If this IS something you're ok with then target the svg, and give it a fill: "white".
Related
When using MUI transitions, in my case Zoom, the child element's on hover transform no longer works. The '&:hover' property still works, because it changes the backgroundColor, but the transform: scale(1.04) does not.
How can I make sure my cards pop into view AND then also get enlarged on hover?
(I am using Next.js with MUI v5.)
import { Zoom} from "#mui/material";
import { ButtonBase } from "#mui/material";
export default function CustomCard({ index }) {
return (
<Zoom in={true} style={{transitionDelay: index !== 0 ? '200ms' : '0ms'}}>
<ButtonBase sx={{'&:hover': {transform: 'scale(1.04)', bgcolor: 'red'}}} >Content<ButtonBase />
</ Zoom>
);
SOLUTION UPDATE:
After some research I believe the problems lies in the inheritance chain of transform, from Zoom parent, to children. I have not gone into detail of how this works in MUI, as I was able to find a solution by completely avoiding the problem, for my particular use case.
Since the CSS property scale() also works without the use of transform, I just completely took out transform from the &:hover, thus avoiding the problem associated with it.
<Zoom in={true} style={{transitionDelay: index !== 0 ? '200ms' : '0ms'}}>
<ButtonBase sx={{'&:hover': {scale: '1.04', bgcolor: 'red'}}} >Content<ButtonBase />
</Zoom>
I'm trying to make a simple slider that change the font size using React and Material UI.
The slider is called PrettoSlider and it a part of Material UI.
What im trying to acheive is to use the slider an then change the font size depending on the slider.
This is what i have so far
export default function ChangeFontSlider() {
const [ItemValue, setItemValue] = React.useState(20);
const handlingChange = (event) => {
setItemValue(event.target.value);
event.preventDefault();
}
return (
<>
<p style={{fontSize: {ItemValue}}}>Drag me to change the font</p>
<PrettoSlider
onChange={handlingChange}
value={ItemValue}
/>
</>
);
}
When trying to slide the slider, I ether get an error or the font remain the same.
Any idea? Thanks!
The slider is called PrettoSlider and it a part of Material UI.
PrettoSlider is an example. Underline component is Slider which is documented here https://material-ui.com/api/slider/.
Accroding to the document, onChange function has 2 parameters, event is the event source while second parameter value is new value when you move slider, is what you need to get data from.
I know this is 8 months old, But you could also just do this in your style tag
<p style={{fontSize: `${ItemValue}px` }}>Drag me to change the font</p>
then instead of just updating a number every time you slide, it will actually increment in pixels
in mui for change the font of slider label you can use global class in slider api.
import { makeStyles } from "#mui/styles";
const sliderStyles= makeStyles({
slider: {
'& .MuiSlider-markLabel' : {fontFamily: 'Vazir' , fontSize: "12px"}
}
})
and set this class to className prop in slider.
import { sliderStyles} from "YOUR/STYLES/PATH";
<Slider
valueLabelFormat={valueLabelFormat}
getAriaValueText={valuetext}
step={null}
valueLabelDisplay="on"
marks={sliderMarks}
className={classes.slider} //this line important
/>
I am using this package in my React application.
The problem is when running the application in a specific device Galaxy Fold, the container of selecting images is too big.
I need to change the size of the div with this id rc-imageselect.
Here is my code
<div className={classes.recapt} style={{ transform: 'scale(0.8, 0.8) translateX(10%)', display: "table" }}>
<Recaptcha
expiredCallback={() => setCaptchaCode(false)}
sitekey={localStorage.getItem("CAPTCHA_KEY")}
render="explicit"
onloadCallback={callback}
verifyCallback={verifyCallback}
/>
</div>
export default makeStyles((theme) => ({
recapt: {
"&div": {
"&#rc-imageselect": {
transform: 'scale(0.8, 0.8) translateX(10%)'
}
}
}
}));
But this doesn't work.
I changed it in te inspect panel and it works. So my guess I am selection the div in a wrong way.
Any help would be appreciated.
I think your style targeting has problem, try like this :
"& > div > image"
And i think u cannot using query (#elementID) on that .
Edit
After uploading photo : Take look at this
I am working with Material-UI Dialog and I want to make it take 80% of the screen.
Ideally, I want something like this.
I am applying a margin to Dialog but it is not working as intended.
For older material-ui versions like 0.20.0:
<Dialog
title="Dialog With 80% Width"
modal={true}
contentStyle={{
width: '80%',
maxWidth: 'none',
}}
open={true}
>
This dialog spans the 80% width of the screen.
</Dialog>
And in material-ui V1 using these props may can help with your needs
fullWidth={true}
maxWidth = {'md'}
Here is examples and other props for Dialog component, or in more advanced way you can take a look into Dialog component code see what is happening there.
The paperFullWidth css class of Dialog component might be helpful. The only condition for using this class is the fullWidth prop of Dialog component should be true. Below is a sample snippet
import React from "react";
import Dialog from "#material-ui/core/Dialog";
import { withStyles } from "#material-ui/core/styles";
const styles = theme => ({
dialogCustomizedWidth: {
'max-width': '80%'
}
});
const DialogExample = ({ classes }) => (
<Dialog
open
fullWidth
classes={{ paperFullWidth: classes.dialogCustomizedWidth }}
>
I'm a Dialog with customized width.
</Dialog>
);
export default withStyles(styles)(DialogExample);
I have a signup form in a React app. I am using material-ui TextField and use the errorText property to add a message if there is an error in the input.
errorText={this.state.messages.emailMessage}
The state.messages.emailMessage is initially set to null and so TextField does not have the extra space for the message when the input is first rendered.
When the message is added it moves the other elements.
How can I allow space for the new node if it is needed so that the other elements are not moved? I tried setting the initial state of the message to ' ' but this colours the input red for error and doesn't work anyway!
You could just use the errorStyle property setting an absolute position..
That's how I fix those problems in my projects.
In the end I passed a style parameter to the material-ul component that set the errorText to display: table. This then stopped it from affecting the other elements when it was added.
To where should this style added?
It needs to be added for the HelperText styles. Here is an example:
const helperStyles = makeStyles(theme => ({
root: {
position: 'absolute',
bottom: '1em',
},
}))
const helperClasses = helperStyles()
<FormHelperText classes={helperClasses}>
{helperText}
</FormHelperText>
You can make them a fixed height by making the helperText equal to an empty space when there is no message to show.
<TextField helperText={error ? error.message : ' '} />
Like #leonormes 's post suggests, adding the errorStyle prop to the material ui component and setting the display property to "table" solved this issue.
The material UI components no longer moves or becomes unaligned when showing an error.
Here's what the component ended up looking like:
<TextField
floatingLabelText="Name"
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}
errorText={this.props.validationErrors.get('name')}
errorStyle={{ display: "table" }}
/>
You can target the MuiFormHelperText-root class . Below example is when you are applying style inside MUI makeStyles , but you can do the same thing with external CSS file .
'& .MuiFormHelperText-root' : {
position : 'absolute',
bottom : '-1rem'
}
For those who need an updated answer (errorText isn't a thing anymore as far as I could tell), then hopefully this will work:
<Box style={{ minHeight: "100px" }} >
<TextField
{...props}
/>
</Box>
It allows the error text message to be rendered inside the flexbox without affecting the other components, so it shouldn't disturb the things around it.
CodeSandbox
You can do something like this
const useStyles = makeStyles({
helperText: {
'& .MuiFormHelperText-root': {
height: '0',
marginTop: '0'
}
}
});
And then add this class text field control
className={classes.helperText}
Just setting position to absolute didn't work at all. This enables error text to display on input field. So for perfect fix we also have to set bottom with some value to make it fixed. Example below.
errorStyle:{
position: 'absolute',
bottom: '-0.9rem'
}
As mentioned in other answer setting display to table worked as well.
So both the styles works