Accordian Data-Active color Need help changing. | Mantine | Page 1

wind sedge Feb 1, 2024, 9:14 PM

#

this is the active color

#

@timber hollow

bronze hound Feb 1, 2024, 9:24 PM

#

You can use data-active attribute for styling

.class[data-active] {
  color: ...
}

wind sedge Feb 1, 2024, 9:24 PM

#

oh man thanks @bronze hound !

#

.herb[data-active] {
  color: " #30497e";
}

@bronze hound tried this and I got

import "@mantine/core/styles/Accordion.css";

so im not sure what going on

bronze hound Feb 1, 2024, 9:38 PM

#

wind sedge ```css .herb[data-active] { color: " #30497e"; } ``` <@502502768943169537> tr...

What does it mean?

#

It doesn't work?

.herb[data-active] {
  ...
}

<Accordion classNames={{ item: classes.herb // 'herb' }}>
  ...
</Accordion>

wind sedge Feb 1, 2024, 9:44 PM

#

how do I use classes for css? I've never been able to

bronze hound Feb 1, 2024, 9:56 PM

#

wind sedge how do I use classes for css? I've never been able to

Just use classNames={{ item: 'herb' }}

wind sedge Feb 1, 2024, 10:02 PM

#

yeah its not working as intended

#

thats why the confusion

bronze hound Feb 1, 2024, 10:05 PM

#

wind sedge yeah its not working as intended

Hmmm, maybe check that you imported your css file correctly and that your class name is unique in this case

#

Also in css file use color: #30497e without quotes

wind sedge Feb 1, 2024, 10:18 PM

#

yeah no dice man I got my imports correct

#

idk its being weird...mantine just dont like non next.js it seems

#

im more than willing to screen share the solution as it is not compatible with codesandbox because of my webpack dev server

#

import { Accordion } from "@mantine/core";

require("./../assets/globals.module.css");
require("./../assets/Images/farmingcan.png");
require("./../assets/Images/afence.png");
require("./../assets/Images/BedBackground.png");
require("@mantine/core/styles/Accordion.css");
require("./../assets/index.module.css");
export const FarmingIndex: React.FC = () => {
  return (
    <>
      <div className="wavy-background text-gray-700 mb-8 mt-10  text-2xl">
        <h1 className="">Allotment/Flower/Herb patches</h1>
      </div>
      <div className="TopPadding"></div>
      <div className="TopPadding"></div>
      <Accordion classNames={{ item: "herbys" }} variant="contained">
        <Accordion.Item value="Ardougne">
          <Accordion.Control>Ardougne</Accordion.Control>
          <Accordion.Panel>Content</Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="Catherby">
          <Accordion.Control>Catherby</Accordion.Control>
          <Accordion.Panel>Content</Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="Falador South">
          <Accordion.Control>Falador South</Accordion.Control>
          <Accordion.Panel>Content</Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="NE Canifis/NW Port Phasmatys">
          <Accordion.Control>NE Canifis/NW Port Phasmatys</Accordion.Control>
          <Accordion.Panel>Content</Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="Prifddinas">
          <Accordion.Control>Prifddinas</Accordion.Control>
          <Accordion.Panel>Content</Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="Troll Stronghold (Roof)">
          <Accordion.Control>Troll Stronghold (Roof)</Accordion.Control>
          <Accordion.Panel>Content</Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="Wilderness (lvl 22)">
          <Accordion.Control>Wilderness (lvl 22)</Accordion.Control>
          <Accordion.Panel>Content</Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="Wilderness (lvl 38)">
          <Accordion.Control>Wilderness (lvl 38)</Accordion.Control>
          <Accordion.Panel>Content</Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="Garden of Kharid">
          <Accordion.Control>Garden of Kharid</Accordion.Control>
          <Accordion.Panel>Content</Accordion.Panel>
        </Accordion.Item>
      </Accordion>
      <div className="TopPadding"></div>
    </>
  );
};

#

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background-image: url("./Images/background.png");
}
::-webkit-scrollbar-thumb {
  background-color: #555;
}

.herbys[data-active] {
  color: #677786;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f1f1f1f1;
}
.mantine-Accordion-control:hover {
  background-color: #30497e;
}
.TopPadding {
  padding-top: 10px;
}
body {
  background-image: url("./Images/background.png");
  font-family: rs3Font;
}

#

literally my whole project so far

#Accordian Data-Active color Need help changing.