Stack Overflow
Stack Overflow

Questions tagged [mantine]

Use this tag for questions about the React-based Mantine components and hooks library.

126 questions
0
votes
1 answer

Why does my burger dropdown hide behind other content?

When looking at my menu in responsive mode (iPhone SE FWIW), my burger menu items are all hidden except for the one that fits in the whitespace between my header and the main content. I'm using Mantine and NextJS, and my overall layout seems simple…
Bill Sambrone
  • 4,334
  • 4
  • 48
  • 70
0
votes
1 answer

How do I change the color of a Mantine component label?

Here's how you define a checkbox in using the Mantine library: While I'm able to change the color of the checkbox itself, I don't know how to change the color of the label itself. Here's further reference:…
Quality Geek
  • 3
  • 3
0
votes
0 answers

Transform scale property not working on image carousel

I have an image carousel built with Mantine carousel that's based on Embla carousel. I'm trying to add a scale animation feature to transform the image that's currently in view by adding classes to it and then removing the classes before scrolling…
Dave Odipo
  • 57
  • 7
0
votes
2 answers

Mantine disable button animation on click?

I would like to disable the button animation on the click. As can be seen here, when clicking on the button, the button moves. Is there an easy way to disable this?
Victor M
  • 603
  • 4
  • 22
0
votes
1 answer

Progress bar component not showing up within Group/Stack

Whenever I try to place a progress bar inside a Group/Stack, it does not show up on my webpage. It works only when I place it outside the Group/Stack. Here is the code and results: import { Stack, ThemeIcon, Text, Progress, Group, Button } from…
RaphaelGohWX
  • 3
  • 2
0
votes
0 answers

Is there a way to stop a React component from losing focus after my event listener callback function fires?

I created an event listener for an Autocomplete component from the Mantine UI library in order to listen for keydown events and navigate to a new page for search results. Unfortunately, whenever I click on the component and type a key (in other…
aurelius
  • 1
0
votes
2 answers

Input field rendered with map in mantine no working

I am trying to make a form builder which takes fields and form (from useForm) to simply map over the fields array and return input based on the type of field, and register the field to mantine form like {...form.getInputProps(name)} where form if…
Haru Blank
  • 1
  • 1
0
votes
1 answer

Reference a custom css class added to MantineProvider theme globalStyles

I'm attempting to add a new class to the Mantine theme globalStyles (ref: https://mantine.dev/styles/global-styles/#global-styles-on-theme). I have adding the style to the MantineProvider, but I can't figure out how to access the style in my…
mack
  • 2,715
  • 8
  • 40
  • 68
0
votes
0 answers

Decoupling my components from the UI system

So, my goal is to have my React components not coupled to the UI system's elements. I want to be able to "quickly" move from, let's say, Mantine to MUI. Here's what I could achieve so far. tsconfig.json: { "compilerOptions": { ... …
F. F. Knob
  • 37
  • 7
0
votes
1 answer

SCSS modules load late on NextJS project with Mantine

I'm building a NextJS project using Mantine for UI components and applying our own custom styles using SCSS modules. Also using Typescript. Everything seems to work great however when looking at the build version (not dev) the order in which the…
James Finn
  • 366
  • 2
  • 12
0
votes
0 answers

Mantine ScrollArea With React Infinite Scroll

I am currently building an app which uses Mantine components. I have a list which I am paginating, and rendering using React-Infinite-Scroll-Component. I want to change the style of the scrollbar of the InfiniteScroll component to look like the…
saddiqs1
  • 59
  • 5
0
votes
0 answers

Custom select onChange makes validation not working anymore - React, Mantine

Later Edit: Found a working solution, check below I'm using mantine and I'm trying to implement a custom onChange on a React Mantine select but by doing that the validation is not working anymore (error underneath not showing). Before i had …
Adrian P.
  • 176
  • 2
  • 6
0
votes
1 answer

How to do a Dropdown Button with Mantine?

What would be the best approach to render a Dropdown Button using Mantine components? I'm thinking of sticking 2 Buttons next to each other with the second one wrapped with a Menu, but not only it wouldn't look good with rounded corners, and I'm…
Johann
  • 12,158
  • 11
  • 62
  • 89
0
votes
1 answer

How to use Mantine dropzone with React hook form in Javascript

Is there any solution to use Mantine dropzone with Reack hook form in javascript? I am doing a modal Upload using Tailwind components like this import { useForm } from 'react-hook-form'; import { Group, Text, useMantineTheme } from…
user20507251
  • 1
  • 2
0
votes
1 answer

Image not working in production, works good on localhost

I'm building a website with Next.js and Mantine. I want to put the Image with my logo in my Header so I used Image from next/image but the problem is that it's not working when i deploy it. It works perfectly on localhost. Deployed: Locally: Code…
Peter
  • 25
  • 5
1 2 3
…
8 9