Mantine DateInput arrow formatting problems

Question

The mantine DateInput formatting is off. The arrows are too large, and it looks like there might be a second column.

I created a basic react app and only added @mantine/core and @mantine/dates version 7.5.0 using the command npx create-react-app my-app. Then I changed the App.js file:

import {DateInput} from "@mantine/dates";
import {createTheme, MantineProvider} from "@mantine/core";

function App() {
  return (
          <MantineProvider theme={createTheme({})}>
              <DateInput
                  label={'Set Start Date'}
                  placeholder={'date here'}
              />
          </MantineProvider>
  );
}

export default App;

When I run npm run start, I see this in my chrome browser (Version 120.0.6099.109 (Official Build) (x86_64)):

Badly formatted Mantine DateInput:

Is there a bug with this mantine version? If not, how do I fix the formatting so that the DateInput looks like the DateInput in the documentation?

Answer 1

It turns out that you have to import the @mantine/dates css:

import '@mantine/dates/styles.css'

make sure to import any @matine styles in correct order, according to docs:

It is important to keep the correct styles import order. @mantine/core package styles must always be imported before any other Mantine package styles:

// ✅ Correct order 
import '@mantine/core/styles.css'; 
import '@mantine/dates/styles.css'; 

// ❌ Incorrect order 
import '@mantine/dates/styles.css'; 
import '@mantine/core/styles.css'; 

Your application styles must always be imported after all @mantine/* packages styles:

// ✅ Correct order - your styles will override Mantine styles
import '@mantine/core/styles.css'; 
import '@mantine/dates/styles.css';
import classes from './Demo.module.css';

// ❌ Incorrect order – Mantine styles will override your styles 
import classes from './Demo.module.css'; 
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';