[Dash Mantine Component] Cannot change the style of a disabled Select item

Dash Python
1

Hi all,

Could not find the answer to this anywhere. I am trying to change the font weight of disabled items in a select dropdown. I

would like my Select component to look like this (which is not possible at the moment in dash components).

image
image778×672 19 KB

The workaround I am working on is to have the categories (here frontend, backend) as disabled items. Problem: I would like to change the font weight and size, and I am not sure how. Here is how I am trying to do it:

dropdown = html.Div(
    [
        dmc.Select(
            placeholder="Dataset...",
            id="dataset-selection",
            data=labels_new,
            style={"marginBottom": 10},
            styles={"disabled": { # This styles prompt does not work
                            "fontWeight": 700}
                },
            dropdownPosition="bottom",
            searchable=True,
            selectOnBlur=True,
        )
    ]
)
2

Hey,

by disabled items do you mean separator labels? If so, you only need to change disabled to separatorLabel:

        dmc.Select(
            placeholder="Dataset...",
            id="dataset-selection",
            data=[
                {"value": "react", "label": "React", "group": "frontend"},
                {"value": "ng", "label": "Angular", "group": "frontend"},
                {"value": "svelte", "label": "Svelte", "group": "backend"},
                {"value": "vue", "label": "Vue", "group": "backend"},
            ],
            style={"marginBottom": 10},
            styles={
                "separatorLabel": {"fontWeight": 700, "color": "red"}
            },  # This styles prompt does not work
            dropdownPosition="bottom",
            searchable=True,
            selectOnBlur=True,
        ),

and it should work.

image