I am using a Slider as part of a custom TableCell custom component (full CodeSandbox):
const thWithSlider = () => (
<th>
<Slider
classes={{ container: classes.slider }}
value={value}
onChange={this.handleChange}
/>
</th>
);
const cell = <TableCell component={thWithSlider} />
The slider is very laggy when the value is changed through a mouse drag (clicks to reposition the thumb do work correctly).
<TableCell component="th">
<Slider classes={{ container: classes.slider }} value={value} onChange={this.handleChange} />
</TableCell>;
should work just fine. It's not laggy but the Slider is always interrupted. Not quite sure why though.
Related
I want to change the color of the label when its in its floaty state with sx. Not sure how to do that.
<FormControl fullWidth size='small'>
<InputLabel id="demo-simple-select-label" sx={{'& Mui-focused':{color:'red'}}}>Bloques Aerial</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
onChange={changeSecondSelect}
sx={{backgroundColor:'white',color:'black'}}
>
{selectedBlocks?.map((item, index) => {
return(
<MenuItem key={index} value={item}>{item}</MenuItem>
)
})}
</Select>
</FormControl>
You almost had it. By inspecting the DOM, the correct CSS selector is .MuiInputLabel-shrink. So your InputLabel component would be:
<InputLabel
id="demo-simple-select-label"
sx={{
'&.MuiInputLabel-shrink':{
color:'red'
}
}}
>
Bloques Aerial
</InputLabel>
It is possible to put button in endAdornment in TextField, e.g. with code:
<TextField size="small" type="text" id="m_general_reference" value={this.props.invoice.general_reference}
InputProps={{
endAdornment: (
<InputAdornment>
<Button variant="outlined" size="small" style={{textTransform: 'none', height: '20px'}}>
Check General Reference
</Button>
</InputAdornment>
)
}} />
But this code does not work when TextField is changed to Input. Is there more or less standard markup to put endAdornment button in InputField? I am interested in more or less standard solution only and no hacks (in case of hacks I will go with TextField).
Is there a way to use any of the material-ui transition components on list elements so that they get animated on addition/deletion (but not mount)?
Just like here: https://reactcommunity.org/react-transition-group/transition-group
You can use the <Fade> transition (or any other transition that material-ui has) and wrap your list-items with that transition.
<Fade in timeout={1500}>
<ListItem key={value} role="listitem" button onClick={handleToggle(value)}>
<ListItemIcon>
<Checkbox
checked={checked.indexOf(value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ 'aria-labelledby': labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={`List item ${value + 1}`} />
</ListItem>
</Fade>
You can see a working example here: https://codesandbox.io/s/mui-fade-transition-list-item-e4i0c?file=/demo.js
The original code is from the example in the material ui transfer list page.
I'm using material-ui-pickers 2.2.4 Datepicker component.
However, I would like the Date icon to be placed on the left side instead on the right side (default).
any help?
tried custom css, to wrap the component with css, and all these hacky ways failed.
<MuiPickersUtilsProvider utils={MomentUtils}>
<DatePicker
readOnly
ref='datepicker'
labelFunc={this.formatWeekSelectLabel}
// value=""
onChange={this.handleDateChange}
animateYearScrolling
InputProps={{
disableUnderline: true,
}}
/>
</MuiPickersUtilsProvider>
</MuiThemeProvider>```
<DatePicker
readOnly
ref='datepicker'
labelFunc={this.formatWeekSelectLabel}
// value=""
onChange={this.handleDateChange}
animateYearScrolling
InputProps={{
disableUnderline: true,
}}
InputAdornmentProps={{ position: 'start' }}
/>
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/