Use this tag for questions about the React-based Mantine components and hooks library.
Questions tagged [mantine]
126 questions
1
vote
0 answers
How to handle darkmode with Tailwind AND Mantine
I'm building a React / Redux app combined with some styling libraries. By looking at the documentation of both Mantine and TailwindCSS, I found pages treating about how to make darkmode / lightmode work in the app for each of them.
As I understand,…
Alexis
- 392
- 2
- 11
1
vote
1 answer
How do you style a Title component in Mantine?
I am trying to style the Title component in Mantine: https://mantine.dev/core/title/
Upload a new Post
According to the docs, we can use color:
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a>
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Feb 02 '23 at 08:38">asked Feb 02 '23 at 08:38</time>
<a href="../../users/13943679/pavel-fedotov" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/13943679.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Pavel Fedotov" />
</a>
<div class="s-user-card--info">
<a href="../../users/13943679/pavel-fedotov" class="s-user-card--link">Pavel Fedotov</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">748</li>
<li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
<li class="s-award-bling s-award-bling__silver" title="7 silver badge">7</li>
<li class="s-award-bling s-award-bling__bronze" title="29 bronze badge">29</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-74958591">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/74958591/grouping-rows-in-mantine-table-in-react-encountered-two-children-with-the-same" class="question-hyperlink">grouping rows in mantine table in react: Encountered two children with the same key error</a></h3>
<div class="excerpt">[enter image description here][1]I'm trying to group the rows in the mantine table and this is what I've tried
I'm new to mantine and react and
I'm trying to group the rows in the mantine table here but I came up with this error
output I'm trying to…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/grouping" class="post-tag grid--cell" title="show questions tagged 'grouping'" rel="tag">grouping</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Dec 30 '22 at 05:55">asked Dec 30 '22 at 05:55</time>
<a href="../../users/18963150/aishwarya-j-s" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/18963150.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Aishwarya J S" />
</a>
<div class="s-user-card--info">
<a href="../../users/18963150/aishwarya-j-s" class="s-user-card--link">Aishwarya J S</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">11</li>
<li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-74922889">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/74922889/integrating-an-optional-app-shell-into-react-router" class="question-hyperlink">Integrating an optional "App Shell" into React Router</a></h3>
<div class="excerpt">I want my React website normally to have an "app shell" (header, footer, sidebar with menu, etcetera) but for specific URI paths...I want those "app shell" elements to disappear. I am new to React and React Router, so I came up with this…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/react-router" class="post-tag grid--cell" title="show questions tagged 'react-router'" rel="tag">react-router</a>
<a href="../../questions/tagged/react-router-dom" class="post-tag grid--cell" title="show questions tagged 'react-router-dom'" rel="tag">react-router-dom</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Dec 26 '22 at 18:09">asked Dec 26 '22 at 18:09</time>
<a href="../../users/284758/brent-arias" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/284758.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Brent Arias" />
</a>
<div class="s-user-card--info">
<a href="../../users/284758/brent-arias" class="s-user-card--link">Brent Arias</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">29,277</li>
<li class="s-award-bling s-award-bling__gold" title="40 gold badges">40</li>
<li class="s-award-bling s-award-bling__silver" title="133 silver badges">133</li>
<li class="s-award-bling s-award-bling__bronze" title="234 bronze badges">234</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-74916615">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/74916615/add-props-to-button-in-mantine-typescript" class="question-hyperlink">Add props to Button in Mantine TypeScript</a></h3>
<div class="excerpt">I would like to create a button that changes background color depending on what the page/path is.
To do this, I was thinking of passing a new prop (ex. selected) to the Button component in Mantine in TypeScript.
So far, I have tried extending the…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Dec 26 '22 at 00:43">asked Dec 26 '22 at 00:43</time>
<a href="../../users/5246226/victor-m" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/5246226.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Victor M" />
</a>
<div class="s-user-card--info">
<a href="../../users/5246226/victor-m" class="s-user-card--link">Victor M</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">603</li>
<li class="s-award-bling s-award-bling__silver" title="4 silver badges">4</li>
<li class="s-award-bling s-award-bling__bronze" title="22 bronze badges">22</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-74372957">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/74372957/dependency-conflict-unable-to-resolve-dependency-tree" class="question-hyperlink">Dependency conflict. Unable to resolve dependency tree</a></h3>
<div class="excerpt">I'm creating React project and use Mantine library. When I try to install @modulz/radix-icons dependency I get error messages that there is a dependency conflict . How can I solve this problem?
Error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/npm" class="post-tag grid--cell" title="show questions tagged 'npm'" rel="tag">npm</a>
<a href="../../questions/tagged/dependencies" class="post-tag grid--cell" title="show questions tagged 'dependencies'" rel="tag">dependencies</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Nov 09 '22 at 09:59">asked Nov 09 '22 at 09:59</time>
<a href="../../users/15309540/igor-gryp" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/15309540.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Igor Gryp" />
</a>
<div class="s-user-card--info">
<a href="../../users/15309540/igor-gryp" class="s-user-card--link">Igor Gryp</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">67</li>
<li class="s-award-bling s-award-bling__bronze" title="5 bronze badges">5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-73971679">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/73971679/mantine-ui-using-usemantinecolorscheme-with-nextjs-colorschemeprovider-is-miss" class="question-hyperlink">Mantine UI - Using useMantineColorScheme with NextJS - ColorSchemeProvider is missing</a></h3>
<div class="excerpt">I have a NextJS app where I'd like to use Mantine as the UI library, however I'm running into an issue with the setup.
I have basically followed the standard setup instructions exactly, however I'm getting the following error:
Error:…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Oct 06 '22 at 09:41">asked Oct 06 '22 at 09:41</time>
<a href="../../users/3640355/tyler" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/3640355.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Tyler" />
</a>
<div class="s-user-card--info">
<a href="../../users/3640355/tyler" class="s-user-card--link">Tyler</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">1,163</li>
<li class="s-award-bling s-award-bling__silver" title="16 silver badges">16</li>
<li class="s-award-bling s-award-bling__bronze" title="37 bronze badges">37</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-73503169">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/73503169/can-you-use-mantine-hooks-without-mantine-core" class="question-hyperlink">Can you use Mantine Hooks without Mantine Core?</a></h3>
<div class="excerpt">I am making a site using Next.js and tailwind. To save time I am trying to find a hooks library. While researching I stumbled across Mantine UI. The mantine hooks library is exactly what I'm looking for, but I don't want to use their UI…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/react-hooks" class="post-tag grid--cell" title="show questions tagged 'react-hooks'" rel="tag">react-hooks</a>
<a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Aug 26 '22 at 15:12">asked Aug 26 '22 at 15:12</time>
<a href="../../users/18355746/shawn" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/18355746.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Shawn" />
</a>
<div class="s-user-card--info">
<a href="../../users/18355746/shawn" class="s-user-card--link">Shawn</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">109</li>
<li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
<li class="s-award-bling s-award-bling__bronze" title="12 bronze badges">12</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-73102195">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/73102195/warning-flushsync-was-called-from-inside-a-lifecycle-method" class="question-hyperlink">Warning: flushSync was called from inside a lifecycle method</a></h3>
<div class="excerpt">Would anyone know how to debug and fix (or mute) following warning (apparently, Mantine is dropping react-popper in next major release)?
Everything works fine, but warning is making it very hard to debug other issues.
Warning: flushSync was called…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
<a href="../../questions/tagged/popper" class="post-tag grid--cell" title="show questions tagged 'popper'" rel="tag">popper</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jul 24 '22 at 21:31">asked Jul 24 '22 at 21:31</time>
<a href="../../users/4579271/sunknudsen" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/4579271.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="sunknudsen" />
</a>
<div class="s-user-card--info">
<a href="../../users/4579271/sunknudsen" class="s-user-card--link">sunknudsen</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">6,356</li>
<li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
<li class="s-award-bling s-award-bling__silver" title="39 silver badges">39</li>
<li class="s-award-bling s-award-bling__bronze" title="76 bronze badges">76</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-73052668">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/73052668/typeerror-cannot-read-properties-of-null-reading-index-https-mantine-dev" class="question-hyperlink">TypeError: Cannot read properties of null (reading 'index') (https://mantine.dev/)</a></h3>
<div class="excerpt">I'm using Rich Text Editor of Mantine in a next js project.
It's working fine for all the control except for List (both ordered & unordered).
When using list in this rte, it gives the following error
TypeError: Cannot read properties of null…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a>
<a href="../../questions/tagged/rte" class="post-tag grid--cell" title="show questions tagged 'rte'" rel="tag">rte</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jul 20 '22 at 13:36">asked Jul 20 '22 at 13:36</time>
<a href="../../users/15661685/abhishek-jha" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/15661685.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Abhishek Jha" />
</a>
<div class="s-user-card--info">
<a href="../../users/15661685/abhishek-jha" class="s-user-card--link">Abhishek Jha</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">111</li>
<li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
<li class="s-award-bling s-award-bling__bronze" title="11 bronze badges">11</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-72959846">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/72959846/how-to-use-pseudo-classes-when-button-clicked-show-title-text" class="question-hyperlink">How to use pseudo classes when button clicked show title text</a></h3>
<div class="excerpt">I would like that the user enters their name in input, then when button to save is clicked the button disappears and the user name appears. (Using createstyles I'm aware I could write a function)
I want to use pseudo classes and am currently using…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a>
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/sass" class="post-tag grid--cell" title="show questions tagged 'sass'" rel="tag">sass</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jul 13 '22 at 01:03">asked Jul 13 '22 at 01:03</time>
<a href="../../users/19530814/mewho" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/19530814.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="meWho" />
</a>
<div class="s-user-card--info">
<a href="../../users/19530814/mewho" class="s-user-card--link">meWho</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">129</li>
<li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
<li class="s-award-bling s-award-bling__bronze" title="8 bronze badges">8</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-72823695">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/72823695/webpackerror-usemantinecolorscheme-hook-was-called-outside-of-context" class="question-hyperlink">WebpackError: useMantineColorScheme hook was called outside of context</a></h3>
<div class="excerpt">I'm using gatsby js and the mantine library. Everything works fine when I run yarn develop, but when I try yarn build I get this error:
WebpackError: useMantineColorScheme hook was called outside of context, make sure your app is wrapped with…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/gatsby" class="post-tag grid--cell" title="show questions tagged 'gatsby'" rel="tag">gatsby</a>
<a href="../../questions/tagged/gatsby-plugin" class="post-tag grid--cell" title="show questions tagged 'gatsby-plugin'" rel="tag">gatsby-plugin</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jul 01 '22 at 02:03">asked Jul 01 '22 at 02:03</time>
<a href="../../users/19456712/sofifa" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/19456712.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="sofifa" />
</a>
<div class="s-user-card--info">
<a href="../../users/19456712/sofifa" class="s-user-card--link">sofifa</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">11</li>
<li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-72400308">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/72400308/using-mantine-ui-tsx-file-within-a-javascript-based-react-project" class="question-hyperlink">Using Mantine UI .tsx file within a javascript based react project</a></h3>
<div class="excerpt">I currently am building a fitness website and am looking to use Mantine UI accordion component which is based off Typescript. I built my react project with javascript. Is there a way to create a .tsx file and call it into my app.js file?
Here's the…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 27 '22 at 03:56">asked May 27 '22 at 03:56</time>
<a href="../../users/16513652/frankieseattle" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/16513652.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="frankieseattle" />
</a>
<div class="s-user-card--info">
<a href="../../users/16513652/frankieseattle" class="s-user-card--link">frankieseattle</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">161</li>
<li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
<li class="s-award-bling s-award-bling__bronze" title="10 bronze badges">10</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-71973863">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/71973863/extend-mantine-accordion-item" class="question-hyperlink">extend Mantine Accordion Item</a></h3>
<div class="excerpt">Mantine accordion specifies that its content should be only of type Accordion.Item (or, AccordionItem) - see the documentation for the children props. This means that even functions that actually return AccordionItem will not be listed.
So, this…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 22 '22 at 19:43">asked Apr 22 '22 at 19:43</time>
<a href="../../users/242098/meir" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/242098.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Meir" />
</a>
<div class="s-user-card--info">
<a href="../../users/242098/meir" class="s-user-card--link">Meir</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">14,081</li>
<li class="s-award-bling s-award-bling__gold" title="4 gold badges">4</li>
<li class="s-award-bling s-award-bling__silver" title="39 silver badges">39</li>
<li class="s-award-bling s-award-bling__bronze" title="47 bronze badges">47</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-71714490">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/71714490/override-mantine-styles-to-only-one-element" class="question-hyperlink">Override Mantine styles to only one element</a></h3>
<div class="excerpt">In my React project, I am using Mantine's library accordion in two different components: Search.jsx and Profile.jsx.
The point is I need to accurately customize its styles only in Profile so I inspected the element and discovered that the default…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/twitter-bootstrap" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap'" rel="tag">twitter-bootstrap</a>
<a href="../../questions/tagged/antd" class="post-tag grid--cell" title="show questions tagged 'antd'" rel="tag">antd</a>
<a href="../../questions/tagged/mantine" class="post-tag grid--cell" title="show questions tagged 'mantine'" rel="tag">mantine</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 02 '22 at 02:49">asked Apr 02 '22 at 02:49</time>
<a href="../../users/17666143/jmonloop" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/17666143.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jmonloop" />
</a>
<div class="s-user-card--info">
<a href="../../users/17666143/jmonloop" class="s-user-card--link">jmonloop</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">78</li>
<li class="s-award-bling s-award-bling__silver" title="3 silver badges">3</li>
<li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-pagination pager fr">
<a class="s-pagination--item" href="../../questions/tagged/mantine_page=2" rel="prev" title="Go to page 2">Prev </a>
<a class="s-pagination--item" href="../../questions/tagged/mantine_page=1" rel="" title="Go to page 1">1</a>
<a class="s-pagination--item" href="../../questions/tagged/mantine_page=2" rel="" title="Go to page 2">2</a>
<div class="s-pagination--item is-selected">3</div>
<div class="s-pagination--item s-pagination--item__clear">…</div>
<a class="s-pagination--item" href="../../questions/tagged/mantine_page=8" rel="" title="Go to page 8">8</a>
<a class="s-pagination--item" href="../../questions/tagged/mantine_page=9" rel="" title="Go to page 9">9</a>
<a class="s-pagination--item" href="../../questions/tagged/mantine_page=4" rel="next" title="Go to page 4"> Next</a>
</div>
</div>
</div>
</div>
</div>
<script src="../../static/js/stack-icons.js"></script>
<script src="../../static/js/fromnow.js"></script>
</body>
</html>