Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@mantine/core Text component color is not inherited

See original GitHub issue

It seems like the Text component does not inherit color value from parents by default and only if we set sx={{ color: "inherit" }}> does it work

Is that intended?

Codesanbox example: https://codesandbox.io/s/mantine-bug-h26lc

Would it be terrible to alter Text source code to default color to inherited? https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/components/Text/Text.tsx#L61

Issue Analytics

State:
Created 2 years ago
Comments:7 (7 by maintainers)

Top GitHub Comments

2reactions

rtivitalcommented, Nov 10, 2021

If you want Text to inherit color, you can use the sx as you described above. In most cases where you would want to inherit color you can replace Text with just a div element or Box component.

0reactions

rtivitalcommented, Nov 19, 2021

Feature was released in 3.2

Top Results From Across the Web

Text | Mantine

Use Text component to display text and links with theme styles. ... color-from and color-to are color from theme.colors; deg is linear gradient...

mantine/Text.mdx at master - GitHub

Usage. Use Text component to display text and links with theme styles. · Gradient variant. To use gradient as Text color: · Line...

Highlight - Dash Mantine Components

If main string does not include highlight part, it will be ignored. Component ignores ... Highlight component supports same props as Text component....

Styles - Lit.dev

In a style element; Import an external stylesheet (not recommended). Dynamic classes and styles; Theming. CSS inheritance; CSS custom properties ...

Material UI Custom theme color assign Typescript

In my case I only need neutral to be read by the Button component so you do this ... let theme = createTheme({...