Typography should have a textShadow prop

[kanguyen-vn]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Right now there is no easy/intuitive way to add textShadow to a Typography, if even any.

Examples 🌈

Example in simple HTML and CSS:

Motivation 🔦

I am working on a web project and the aesthetic I am going for is a simple boxShadow for every element, but the main header of the homepage is a Typography, and it is the only thing without a shadow and it's not consistent to the styling of the whole project.

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

You can apply the text shadow globally with the theme.typography.

[kanguyen-vn]

@oliviertassinari

I have tried that but it still doesn't work.

Here is my theme.typography:

const theme = createMuiTheme({
// the rest
typography: {
fontFamily: "Inter",
textShadow: "5px 5px 0px 0px rgba(0,0,0,0.15)",
},
});

I even tried applying the textShadow straight to the Typography using makeStyles/withStyles, but there are still no shadows. When I tried boxShadow, it output a shadow of the rectangle surrounding the Typography but not the text itself. I don't see any documentation on the website for this either, nor do I see a shadow prop in the default theme.typography.

[oliviertassinari]

const theme = createMuiTheme({
  typography: {
    fontFamily: "Inter",
    allVariants: {
      textShadow: "5px 5px 0px 0px rgba(0,0,0,0.15)",
    },
  },
});

[kanguyen-vn]

const theme = createMuiTheme({
  typography: {
    fontFamily: "Inter",
    allVariants: {
      textShadow: "5px 5px 0px 0px rgba(0,0,0,0.15)",
    },
  },
});

I apologize if this is becoming a support post, but that still is not working for me either. I've tried that in both the createMuiTheme and the makeStyles.

[kanguyen-vn]

@oliviertassinari
Sorry for bothering you again, but do you think there is another alternative to the above solution? It didn't work when I tried it on my project.