[dash mantine components] different background color of the selection component

Dash Python
1

Hi Dash Community:

I tried a few times, but couldn’t find the answer.
Is there a way to change the background color of the selection component?

2

Hi, which background color are you referring to? When the Drop down is not visible?

3

thank you @AIMPED
As you can see, the color below is dark. I tried to change it to different colors based on different selection components.
image
For instance, if I have a component “select_a”, with selections as “a_0”, “a_1”, “a_2”. Then I can another component “select_b”, with selections as “b_0”, “b_1”, “b_2”. I want to be able to show the background color for component “select_a” as “blue” and for component “select_b” as “yellow”. This could make user more aware of the different selection categories. Hope this makes sense. Thank you for the reply again.

4

HI @entropy_l,

I found a hacky way to more or less achieve what you want to do, but it feels wrong :wink:

If you specify a background-color via the style parameter, you change the title background. The background of the options (or selected value) can be changed via css. You would have to specify a different className for each selector. Here an example:

import dash_mantine_components as dmc
import dash


app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dmc.Select(
            label='select_a',
            placeholder='Select one',
            id='select_a',
            value='ng',
            data=[
                {'value': f'a_{idx}', 'label': f'a_{idx}'}
                for idx in range(3)
            ],
            style={'width': 200, 'marginBottom': 10, 'background-color': 'blue'},
            className='select_a'
        ),
        dmc.Select(
            label='select_b',
            placeholder='Select one',
            id='select_a',
            value='ng',
            data=[
                {'value': f'b_{idx}', 'label': f'b_{idx}'}
                for idx in range(3)
            ],
            style={'width': 200, 'marginBottom': 10, 'background-color': 'yellow'},
            className='select_b'
        )
    ]
)

if __name__ == '__main__':
    app.run(debug=True)

custom.css in the assets folder:

.select_a .mantine-Select-input {
    background-color: red;
}
.select_b .mantine-Select-input {
    background-color: green;
}

img1

As I said, it’s somehow what you want to achieve but there must be more elegant ways to do so…
mred css

1 Like
5

Hello, you can check this page Dash from documentation. And then you need to find right selector through developer console and find its name on selector documentation page.

1 Like
6

Thank you so much @AIMPED. I think this solution works.
As you can see below, I removed the labels and wrapped the component with the dmc.mantineprovider with dark theme. Then, update the code in css as you suggested works. Now, we can highlight different selections components with different colors. Thank you so much!

image

1 Like
7

Thank you @martin2097. This looks to be very useful - I used the DMC for a while but never looked into above link. Thank you for sharing this and look into this question!

1 Like
8

I believe @snehilvj added this section in documentation in recent update. Styles API is really nice approach if you want to keep everything in python syntax. I was able to get very nice looking Selects.

9

Thank you for highlighting this. I will start to dig into the styles API. If I find a solution from there, will post back here. Thank you! @martin2097

10

Could you share your code for the select components you created? I’m intrigued.

11

You could remove the blue and yellow background color I added in myexample for better visibility, it’s still visible in the corners.

12

Agree. Indeed, I removed the “labels” so as to hide yellow and blue backgrounds. but this is very helpful, thank you! @AIMPED

1 Like