Customizing Dash Mantine Components using `styles` property

Dash Mantine is a UI library for creating responsive and customizable dashboards with React-based components in python using the Plotly Dash library. It provides a wide range of pre-built components that can be easily integrated into your Dash applications.

This is how the Select component looks like out of the box:

Let’s see if can spice it up!

We will use the styles property available in almost all components which are part of theDash Mantine Components or dmc for short. Its used to customize the appearance of the component. styles takes a dictionary in which the key is the target and the value is a dictionary of the desired styles to be applied to that target. Here’s the code and the output:

dmc.Select(
    mt="md",
    styles={
        "root": {
            "position": "relative",
        },
        "input": {
            "height": 54,
            "paddingTop": 18,
        },
        "label": {
            "position": "absolute",
            "pointerEvents": "none",
            "fontSize": 11,
            "paddingLeft": 10,
            "paddingTop": 5,
            "zIndex": 1,
        },
    },
    data=["React", "Angular", "Svelte", "Vue"],
    placeholder="Pick one",
    w=300,
    label="Your favorite library",
)

Similarly, you can modify other inputs like the DatePicker:

Looks good, doesn’t it!

I’ll share more tips and tricks like these every weekend. You can find me here: https://www.linkedin.com/in/snehilvj/ and check out http://dash-mantine-components.com.