Mantine DatePickerInput rendering bug

Question

I'm trying to use Mantine's DatePickerInput in my react app but there seems to be an issue with how the component is rendered.

Expected behaviour

Current Behaviour

Library versions:

"react": "^18.2.0",
"@mantine/core": "^7.1.7",
"@mantine/dates": "^7.1.7",

Implementation:

<DatePickerInput
  name={name}
  placeholder={placeholder}
  ref={ref}
  value={value}
  onChange={e => onChange(e ?? undefined)}
  clearable
  error={error?.message}
  {...otherProps}
/>

I checked to see if some styles in any of the css files went rogue but that isn't the case here. I also tried downgrading mantine to 7.1.0.

Answer 1

You need to import styles for the package like it is mentioned in the documentation – https://mantine.dev/dates/getting-started/#installation

import '@mantine/dates/styles.css';