[core] Fix issues when using styled-components

[mnajdova]

Fixing some issues found when using @mui/styled-engine-sc (styled-components).

1. Difference when using string template array

-const CustomButtonRoot = styled('button')(`
+const CustomButtonRoot = styled('button')`
  background-color: #007fff;
-`);
+`;

See https://codesandbox.io/s/quizzical-yalow-thert?file=/src/App.js

The proposed syntax is working with both emotion & styled-components. Moreover, now these styles are considered as CSS template strings by prettier too.

2. Replace backgroundClip with WebkitBackgroundClip where the value 'text' is being used. This value is supported only with the webkit- prefix. See https://caniuse.com/background-clip-text. For example:

index 911c811a53..a53a648b86 100644
--- a/docs/src/components/typography/GradientText.tsx
+++ b/docs/src/components/typography/GradientText.tsx
@@ -7,7 +7,7 @@ const GradientText = styled('span')<{
     theme.palette.mode === 'dark'
       ? theme.palette.primary.main
       : `linear-gradient(to right, ${theme.palette[color].main}, ${theme.palette[color][700]})`,
-  backgroundClip: 'text',
+  WebkitBackgroundClip: 'text',
   WebkitTextFillColor: 'transparent',
 ```}));

[mui-pr-bot]

No bundle size changes

Generated by 🚫 dangerJS against 5c121a8

[siriwatknp]

👍