Question 279043 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Mantine DatePickerInput rendering bug

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.

Tags:

2

Answers


  1. 0

    I too have the same issue

    while comparing with the demo I see some styles are missing

    "@mantine/dates": "^7.1.7",
    "@mantine/core": "^7.1.3",
    "@mantine/ds": "^7.1.3",
    "typescript": "^5.0.2",
    "react": "^18.2.0",

    enter image description here

    linked here as well https://github.com/mantinedev/ui.mantine.dev/issues/75

    Login or Signup to reply.
  2. 0

    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';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search