reactjs - 在没有主题的情况下 react KeyboardDatePicker 样式

Question

我有一个具有自定义样式的 KeyboardDatePicker:

import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';

const datePickerTheme= outerTheme => ({
    overrides: {
    MuiFormControl: {
        marginDense: {
            marginTop:"0px"
        }
    },
    MuiInputAdornment: {
        positionEnd: {
            marginLeft: "0px"               
        }
    }
    }
});   

<ThemeProvider theme={datePickerTheme(originalTheme)}>
    <MuiPickersUtilsProvider utils={DateFnsUtils} >     
        <KeyboardDatePicker
        variant="inline"
        format="dd/MM/yyyy"             
        margin='dense'/>
    </MuiPickersUtilsProvider>
</ThemeProvider>

它工作得很好，但我试图重现相同的自定义，而不必将选择器嵌套在主题内。我尝试过使用 InputProps 属性:

<KeyboardDatePicker
variant="inline"
format="dd/MM/yyyy"
margin='dense'
InputProps={{classes: { 
    MuiFormControl: {
        marginDense: {      
            marginTop: '0px'                            
        }                       
    },
    MuiInputAdornment: {
        positionEnd: {
            marginLeft: "0px"               
        }
    }
}
}}/>        

但这不起作用。

是否可以通过classes、inputProps或任何其他方法来实现自定义，而无需诉诸主题或全局规则？

Answer 1

是的，有办法 只需向其中添加 className 属性并使用类中的 css 样式加载它，它就可以正常工作。

日期选择器

 <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale={"sw"} >
          <KeyboardDatePicker
            minDate={minDate}
            maxDate={maxDate}
            className={classes.input}
            variant="dialog"
            format="L"
            clearable
            maxDateMessage=""
            views={["year", "month", "date"]}
            placeholder="dd/MM/yyyy"
            invalidDateMessage=""
            mask="__/__/____"
            value={ val }
            onChange={(date) => {}}
            KeyboardButtonProps={{
              style: {marginLeft: -24}
            }}
            InputProps={{
              disableUnderline: true
            }}
          />
 </MuiPickersUtilsProvider>

使用样式

const useStyles = makeStyles( theme => ({
  input: {
    height: 36,
    width: 240,
    textAlign: 'right',
    paddingLeft: theme.spacing(1),
    paddingRight: theme.spacing(1),
    backgroundColor: theme.palette.common.white,
  },
}));