KeyboardDatePicker styling order (?)

!

This might be a local issue, but has been tested on two separate systems- and the same issue appears on both. But while creating this ticket i realized i cannot replicate the problem on codesandbox (see live example). But when running the exact program locally based on react-create-app the problem appears.

The issue seems to be related to order of how the styling gets rendered.

Tested locally the button root styling gets prioritized over the pickers. This issue occurred when upgrading from Material ui 3 and pickers 2.

Environment

{
  "name": "new",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "@date-io/moment": "1.3.7",
    "@material-ui/core": "4.1.2",
    "@material-ui/icons": "4.2.1",
    "@material-ui/pickers": "3.1.1",
    "moment": "2.24.0",
    "node": "10.15.3",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Steps to reproduce

1. Install create-react-app
2. add IconButton/Menu to app.

import React from 'react';
import './App.css';
import Demo from './demo';
import Menu from "@material-ui/icons/Menu";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton/IconButton";


function App() {
  return (
    <div className="App">
      <IconButton color="inherit" aria-label="Menu">
        <Menu/>
      </IconButton>
      <Demo/>
    </div>
  );
}

1. Add MuiPickersUtilsProvider / KeyboardDatePicker used with moment.

import moment from "moment";
import React from "react";
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core/styles";
import MomentUtils from "@date-io/moment";

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

const useStyles = makeStyles({
  grid: {
    width: "60%"
  }
});

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2014-08-18T21:11:54")
  );

  const classes = useStyles();

  function handleDateChange(date) {
    console.log(moment(date));
    setSelectedDate(moment(date));
  }

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <Grid container className={classes.grid} justify="space-around">
      <div style={{paddingTop: '100px'}}>
        <KeyboardDatePicker
          margin="normal"
          id="mui-pickers-date"
          label="Date picker"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />
        </div>
      </Grid>
    </MuiPickersUtilsProvider>
  );
}
export default App;

1. Run npm start.

Expected behavior

The picker element to be rendered with correct styling.

Actual behavior

Pickers element with button styling.

Live example

https://codesandbox.io/s/musing-pascal-7gbdi?fontsize=14

any help/info would be greatly appreciated.
Zipped project: https://ufile.io/wpae8kp0

[JReinhold]

I’ve experienced the same issue, tracked the cause to this: https://github.com/mui-org/material-ui/issues/15610. I followed https://github.com/mui-org/material-ui/issues/15610#issuecomment-492215308, and fixed all imports that was double nested, eg. changed

import Button from '@material-ui/core/Button/Button';

to

import Button from '@material-ui/core/Button';

I had a LOT of imports to fix (did a search on from '@material-ui/core/, it was a breeze). After all imports were fixed, the problem went away.

You can check if you have the same problem with duplicate imports, by going in to your Chrome DevTools > Sources > expand localhost:port > node_modules > @material-ui > core > esm. If you are doing it “wrong”, you will have the same module both in root of core folder, and in core/esm folder. (see first screenshot) If you are doing it right, you only have modules in the esm folder. (see second screenshot)

[Romcol]

Thank you @JReinhold !! I also had '@material-ui/Component/index' imports which needs to be renamed '@material-ui/Component'