oliviertassinari
commented
3 years ago @ZLevine Thanks for opening the issue. There are multiple aspects to it:
- The JavaScript syntax can't work with emotion and styled-components. The same key will override the other.
- The documentation needs to be updated to showcase the CSS approach.
- One solution is:
import * as React from 'react';
import { ThemeProvider, createMuiTheme, CssBaseline, Box } from '@material-ui/core';
const theme = createMuiTheme({
typography: {
fontFamily: 'Raleway, Arial',
},
components: {
MuiCssBaseline: {
styleOverrides: `
@font-face {
font-family: 'DroidSerif';
src: url('https://rawgit.com/google/fonts/master/ufl/ubuntu/Ubuntu-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
`,
},
},
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Box sx={{
fontFamily: 'DroidSerif',
}}>
Hello
</Box>
</ThemeProvider>
);
}- CssBaseline doesn't allow to mix CSS and JavaScript, it needs to be updated:
diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js
index 4b5c9c8980..23475eb9b8 100644
--- a/packages/material-ui/src/CssBaseline/CssBaseline.js
+++ b/packages/material-ui/src/CssBaseline/CssBaseline.js
@@ -1,6 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import { deepmerge } from '@material-ui/utils';
import useThemeProps from '../styles/useThemeProps';
import GlobalStyles from '../GlobalStyles';
@@ -25,7 +24,7 @@ export const body = (theme) => ({
});
export const styles = (theme) => {
- const defaultStyles = {
+ let defaultStyles = {
html,
'*, *::before, *::after': {
boxSizing: 'inherit',
@@ -46,7 +45,7 @@ export const styles = (theme) => {
const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides;
if (themeOverrides) {
- return deepmerge(defaultStyles, themeOverrides);
+ defaultStyles = [defaultStyles, themeOverrides];
}
return defaultStyles;This works with emotion and styled-components. Without the change, it only works with emotion once wrapped with import { css } from @material-ui/styled-engine;
- We need to do something about TypeScript, not sure why:
cc @mnajdova
mnajdova
ghost
eric-burel
daniel-rabe
keepeek-rd
LazzyLizzard
ncesar
Current Behavior 😯
When specifying multiple
@font-faceat-rules via an array inMuiCssBaseline.styleOverrides, a single@font-faceblock is output rather than multiple@font-facedeclarations. The final rule thus takes precedence, ignoring all previous rules.Expected Behavior 🤔
Specifying multiple
@font-faceat-rules should result in multiple@font-facedeclarations, allowing us to specify multiple faces for different font variants.Steps to Reproduce 🕹
This is tough to build on CodeSandbox since it involves theming and it's hard to get that set up on there to render correctly. But you should be able to reproduce with the dummy code below in ANY theme in your local environment.
Steps:
createMuiTheme@font-facewith several values inMuiCssBaseline.styleOverridesas designated below:CssBaselinecomponent inside yourThemeProvider:<style>tag contains the following:Notice that there's only a single
@font-faceat-rule containing each rule rather than a@font-faceat-rule for EACH object specified. This results in every font rendering using whatever the last rule is (in this case, italic).What SHOULD happen is this:
Context 🔦
Trying to define multiple @font-face declarations in order to render multiple font variations of a single typeface.
Your Environment 🌎
`npx @material-ui/envinfo`
``` System: OS: macOS 11.2 Binaries: Node: 14.4.0 - /usr/local/bin/node Yarn: Not Found npm: 6.14.11 - /usr/local/bin/npm Browsers: Chrome: 88.0.4324.150 Edge: Not Found Firefox: 84.0.2 Safari: 14.0.3 npmPackages: @emotion/react: ^11.1.5 => 11.1.5 @emotion/styled: ^11.1.5 => 11.1.5 @material-ui/core: ^5.0.0-alpha.25 => 5.0.0-alpha.25 @material-ui/icons: ^5.0.0-alpha.24 => 5.0.0-alpha.24 @material-ui/styled-engine: 5.0.0-alpha.25 @material-ui/styles: 5.0.0-alpha.25 @material-ui/system: 5.0.0-alpha.25 @material-ui/types: 5.1.7 @material-ui/unstyled: 5.0.0-alpha.25 @material-ui/utils: 5.0.0-alpha.25 @types/react: ^17.0.2 => 17.0.2 react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 typescript: ^4.1.5 => 4.1.5 ```Using with Next.js though that shouldn't matter. :)