Material UI Tooltip组件覆盖子组件className：此行为是否符合预期？

Great question! Let’s break down what’s happening here and answer your core questions clearly.

What’s Going On With Your Buttons? #

Let’s recap the behavior you’re seeing through the lens of how most UI component libraries handle props and styles:

• First button (no Tooltip): Works as expected because its state/hover styles are applied without any external props overriding them. No conflicts mean the color behaves correctly based on state and hover.
• Second button (Tooltip with broken className): The Tooltip component (a wrapper or higher-order component) is likely injecting its own className/style props into the button before your custom className gets processed. If the library merges styles by prioritizing later-applied rules, the Tooltip’s styles end up overriding yours—hence the wrong color.
• Third button (fixed by prop order): By moving your className to the end of the button’s props, you’re ensuring it’s processed last during style merging. Most libraries prioritize the final props in the list when combining className values (or resolving style conflicts with equal specificity), so your custom color rules take precedence over the Tooltip’s injected styles.

Core Questions Answered #

Is this expected behavior?

It depends entirely on the UI library you’re using:

• Some libraries explicitly design wrapper components like Tooltip to respect the user’s final props, ensuring your custom className/style always takes priority.
• Others might have internal logic that injects their own styles after your initial props, leading to this conflict.

From React’s base perspective, props are technically unordered, but most component libraries add their own logic for merging props. This could be an intended "quirk" of the library, or even a documentation gap worth checking. If the library’s docs don’t mention prop order affecting styles, it might be an unintended edge case—but it’s still a common behavior to watch for with wrapper components.

Do I have to put className as the last prop to make it work?

Not necessarily, but it’s a quick fix. Here are more reliable alternatives:

• Check the Tooltip’s docs: Many libraries offer dedicated props (like childClassName or contentClassName) to pass custom styles to the wrapped element, avoiding prop order conflicts entirely.
• Boost CSS specificity: Instead of relying on prop order, write your custom styles with higher specificity (e.g., add a parent class to your button container, like .my-button-container .custom-button). This ensures your styles override the Tooltip’s styles regardless of prop order.
• Modify component logic (if you own it): If this is a custom Tooltip you built, adjust its internal props merging to prioritize the user’s custom className over injected styles—for example, concatenate the injected className before the user’s, so your rules come last in the stylesheet.

内容的提问来源于stack exchange，提问作者Tyler