设置标签样式并在内联日期选择器中输入单个字段

时间:2019-05-07 14:43:43

标签: material-ui

我在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'
      }
    },

但这会影响每个表单标签。我该如何调整特定的日期选择器标签?

0 个答案:

没有答案