CODEWITHSUNDEEP
cssreactjsnext.jsmaterial-uicss-in-js
E.Cogalan
E.Cogalan

Reputation: 1

Border color defined via sx prop shows correctly in DevTools but not on the rendered site

I'm developing a web application using React and Next.js, and I'm using Material UI for my UI components. I have a component that renders a Material UI Card with custom styles via the sx prop. In my style configuration, I'm setting **borderColor **to "primary.main", which should correspond to the color #2497ff in my theme.

Here’s the relevant component code:

return (
  <Card
    component="form"
    onSubmit={onSubmit}
    sx={MessageCardStyles.card}
    elevation={0}
    variant="outlined"
  >
    {/* Content */}
  </Card>
);

And my style configuration is:

export const MessageCardStyles = {
  card: {
    bgcolor: "background.paper",
    border: "2px solid",
    borderColor: "primary.main",
  },
} as const;

When I inspect the element in the browser’s developer tools, I can see that the correct **borderColor ** (i.e., #2497ff) is applied.

DevTools Screenshot

However, the rendered site does not display the border color as expected.

Rendered Site Screenshot

My questions are:

  1. What might be causing this discrepancy between the dev tools and the rendered output?

  2. Are there any known issues with overriding the border color when using the variant="outlined" prop on Material UI's Card component?

Any help or pointers would be greatly appreciated!

I've tried modifying the other two style properties, and those changes are reflected correctly on the site, confirming that the styles are targeting the correct element. However, when I change only the borderColor property, the rendered site does not reflect the update, despite DevTools displaying the correct borderColor value. This indicates that while the style is applied in the DOM, the borderColor change isn’t visible when the component renders.

Upvotes: 0

Views: 32

Answers (1)

E.Cogalan
E.Cogalan

Reputation: 1

I found the solution!

The issue was caused by the default styles applied by Material UI's Card component when using variant="outlined". By default, it sets a white background, which visually overrides the border color, making it seem like the border color is not being applied correctly.

To fix this, I increased the specificity of my styles using && in the sx prop:

export const MessageCardStyles = {
  card: {
    '&&': {
      bgcolor: "background.paper",
      border: "2px solid",
      borderColor: "primary.main",
    },
  },
} as const;

By using &&, the generated CSS selector gains higher specificity, ensuring that my styles override Material UI's defaults. After applying this change, the correct borderColor is now visible as expected.

Hope this helps anyone facing a similar issue! 🚀

Upvotes: 0

Related Questions