Material-ui-pickers: KeyboardDatePicker styling order (?)

Created on 24 Jun 2019 · 8Comments · Source: mui-org/material-ui-pickers

!

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.

alt text

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

Install create-react-app
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>
  );
}

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;

Run npm start.

Expected behavior

The picker element to be rendered with correct styling.

Actual behavior

Pickers element with button styling.

alt text

Live example

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

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

incomplete

Source

henrikej

👍2

Most helpful comment

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';

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)

Screenshot_07-15 20 28 54
Screenshot_07-15 20 29 35

JReinhold on 15 Jul 2019

🎉4

All 8 comments

Having the same issue, anyone come across any fixes?

cdriscol on 2 Jul 2019

👍1

Just to update.. I found out the issue for us was that when we had the KeyboardDatePicker mounted, we would get duplicate styles loaded for MuiIconButton, MuiToolTip, etc. The second loading of the MuiIconButton styles would then override styles from other Mui components (like Switches, DatePicker in this case, etc).

As a quick workaround for now.. I created a hook to avoid having duplicate Mui styles in the <head> tag. I will say, this workaround is not an ideal solution, so I'll be following this issue to see what comes of any fixes.

function usePickerIssue1143Hack() {
    // TODO: Remove this once https://github.com/mui-org/material-ui-pickers/issues/1143 is fixed.
    React.useEffect(() => {
        const headNodes = document.getElementsByTagName('head');
        if (!headNodes.length) return;

        const targetNode = headNodes[0];
        const observer = new MutationObserver(mutationList => {
            // is a style dom node added
            const addedStyleNode = mutationList.some(mutation => {
                if (mutation.type !== 'childList') return false;
                return Array.from(mutation.addedNodes).some(
                    addedNode => addedNode.nodeName === 'STYLE'
                );
            });

            // if we didn't add a style node, no need to do the rest
            if (!addedStyleNode) return;

            const styleNames = {};

            // iterate over all style tags
            Array.from(document.getElementsByTagName('style')).forEach(node => {
                // get the Mui style name stored on data-meta
                const styledName = node.getAttribute('data-meta');
                if (!styledName) return;

                if (!styleNames[styledName]) {
                    // keep track of Mui style names we've already added
                    styleNames[styledName] = true;
                    return;
                }

                // remove style node if already exists in head
                node.remove();
            });
        });

        // observe for childList changes including subtree
        observer.observe(targetNode, {
            childList: true,
            attributes: false,
            subtree: true,
        });

        // disconnect on hook cleanup
        return observer.disconnect;
    }, []);
}

cdriscol on 2 Jul 2019

That can mean that you have 2 different jss packages in the bundle

dmtrKovalenko on 5 Jul 2019

I have the same issue. I don't think I had it before. It probably came with packages updates, don't know where it comes from though. Thanks

Romcol on 15 Jul 2019

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

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.

Screenshot_07-15 20 28 54
Screenshot_07-15 20 29 35

JReinhold on 15 Jul 2019

🎉4

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

Romcol on 16 Jul 2019

👍1

This solved our problem as well. Thank you @JReinhold

henrikej on 7 Aug 2019

in my case i was putting a global style for all components ( very bad idea ) :

const theme = createMuiTheme({
  overrides: {
    layoutPadding: '52px 39px',
    layoutPaddingTop: '52px',
    MuiButton: {
      root: {
        borderRadius: 30,
        width: '100%',
      }, 
    }, 
    MuiInput: {
      underline: {
        "&:before": {
          borderBottom: `1px solid white`
        }
      }
    },
    MuiFormLabel: {
      root: {
        color: 'white'
      }
    }
  }, 
  palette: {
    background: {
      main: '#0A226B',
    },
    primary: {
      main: '#0a226b',
    },
    secondary: {
      main: '#76c9d2',
      contrastText: '#FFFFFF',
    },
    error: {
      main: '#9D399E',
    },
  },
});

Fixed to:

const theme = createMuiTheme({
  palette: {
    background: {
      main: '#0A226B',
    },
    primary: {
      main: '#0a226b',
    },
    secondary: {
      main: '#76c9d2',
      contrastText: '#FFFFFF',
    },
    error: {
      main: '#9D399E',
    },
  },
});