Menu z-index of popper for color chooser

[woigl]

I am trying to change the z-index by code for the popper of the menu items. I want to do this by code and not by CSS.

How can I achieve this?

[sfkaos]

You can change the id prop for the popper using the popperId prop and then use javascript to target that id. Does that help?

        popperId="highlightColorPicker"
        swatchColors={[
          { value: "#000000", label: "Black" },
          { value: "#ffffff", label: "White" },
          { value: "#888888", label: "Grey" },
          { value: "#ff0000", label: "Red" },
          { value: "#ff9900", label: "Orange" },
          { value: "#ffff00", label: "Yellow" },
          { value: "#00d000", label: "Green" },
          { value: "#0000ff", label: "Blue" },
        ]}
      />```

[AgrYpn1a]

@sfkaos This does not solve the problem as some classes seem to be added after the popper shows up and they override the zIndex again.. I am trying now to add my own class with !important for the zIndex but this really seems rather like a hack than a solution, so we need a more proper way to handle this. I may be able to fork the repo and work on a fix these days, and if I manage to do so I'll fire up a PR, hopefully it can be reviewed and get in fast.

[AgrYpn1a]

@woigl @sfkaos I have opened a PR that should address this issue in the same manner as the link popup is handled.

[sjdemartini]

@woigl Here are a couple examples of how to control the context in which the Color Picker renders or set its zIndex via code: https://github.com/sjdemartini/mui-tiptap/issues/206#issuecomment-2133851815

The latter still does use !important in order to take precedence, so I'll separately look into a cleaner way to override these styles.

I'm going to close this out, but if need be, please follow up on that linked issue if need be, since it's the same topic and has a bit more discussion. Thanks