Question

我的项目中有一个DatePicker组件，这看起来像日期选择器工作正常。唯一的问题是，更改月份的箭头被反转了

import { InlineDatePicker } from "material-ui-pickers";
import React, { Fragment, useState, useEffect } from "react";
import CardMedia from '@material-ui/core/CardMedia';
import event from '../img/event.svg';
import { withStyles } from '@material-ui/core/styles'
import PropTypes from 'prop-types';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'

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())
  useEffect(() => {
    let formattedDate = selectedDate.toISOString().slice(0, -14)
    props.onUpdate('due_date', formattedDate)
  }, [selectedDate])

  const { classes } = props;
  return (
    <div className={classes.datePicker}>
      <CardMedia image={event} title="Due date" style={iconStyle}/>
      <Fragment>
        <div>
          <InlineDatePicker datePicker InputLabelProps={{style: {marginLeft: '30px'} }} InputProps={{style: {paddingLeft: '30px'} }}
            {...props} className={classes.picker} label={props.label} value={selectedDate} onChange={handleDateChange} variant="filled" 
         </div> 
      </Fragment>
    </div>
  );
}

DatePicker.propTypes = {
  classes: PropTypes.object.isRequired,
  onUpdate: PropTypes.func,
  label: PropTypes.string
};

export default withStyles(styles)(DatePicker);

日期选择器中的箭头显示为反向我使用了一个hack，并做了临时修复。

leftArrowIcon={<KeyboardArrowRight/>}
rightArrowIcon={<KeyboardArrowLeft/>}/>

什么弄乱了箭头？

材质Ui Datepicker显示箭头反转

0 个答案: