我在React项目中有一个内联的日期选择器,希望标签和输入有额外的填充以适应绝对定位的日历图标
const iconStyle = {
position: 'absolute',
width: '20px',
height: '20px',
zIndex: '10',
top: '15px',
left: '8px'
}
const styles = theme => ({
datePicker: {
marginTop: theme.spacing.unit * 2,
position: 'relative'
}, picker: {
width: '100%'
}
});
function DatePicker(props) {
const [selectedDate, handleDateChange] = useState(new Date());
const { classes } = props;
return (
<div className={classes.datePicker}>
<CardMedia image={event} title="Due date" style={iconStyle}/>
<Fragment>
<div>
<InlineDatePicker className={classes.picker} label={props.label} value={selectedDate} onChange={handleDateChange} variant="filled" />
</div>
</Fragment>
</div>
);
}
export default withStyles(styles)(DatePicker);
我必须在标签和输入上添加额外的填充。我可以按照主题来做,
MuiFormLabel: {
root: {
marginLeft: '10px'
}
},
但这会影响每个表单标签。我该如何调整特定的日期选择器标签?