It seems that overriding the CSSBaseline won't work.
I'm building a website using Next.js and the MUI library, but I can't seem to get the font customization working. I tried to follow the guide and none of it works. I don't know if it has something to do with the CssBaseline theme.
_app.tsx
import { createTheme, ThemeProvider } from '#mui/material/styles'
import CssBaseline from '#mui/material/CssBaseline'
const theme = createTheme({
typography: {
fontFamily: [
'"IBM Plex Sans"',
].join(','),
},
components: {
MuiCssBaseline: {
styleOverrides: {
"#font-face": {
fontFamily: "IBM Plex Sans",
src: `url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap')`
},
}
}
}
});
export default ({Component, pageProps}:any) => <><CssBaseline /><ThemeProvider theme={theme}><Component {...pageProps} /></ThemeProvider></>
_document.tsx
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<style>#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');</style>
</Head>
<body><Main /><NextScript /></body>
</Html>
)
}
SOLVED: Had to put the baseline element inside the theme provider. Duh!
SOLVED: Had to put the baseline element inside the theme provider. Duh!
Related
I am using Material UI's Autocomplete/TextField and I want to override its default CSS on hover and when the text field is in focus state.
Default CSS:
Image for default CSS in focused state
I want to change this blue colour when input box is in focus state.
I have tried using ThemeProvider/createTheme hook but it is not helping. Below is the code for createTheme:
import { ThemeProvider, createTheme } from "#mui/material/styles";
const overrideTheme = createTheme({
overrides: {
MuiInput: {
root: {
"&$focused": {
borderColor: "red",
},
},
},
},
});
export default function AutocompleteComponent() {
return (
<ThemeProvider theme={overrideTheme}>
<Autocomplete
classes={classes}
freeSolo
id="free-solo-2-demo"
options={
autocompleteResult ? top100Films.map((option) => option.title) : []
}
renderInput={(params) => (
<TextField
variant="outlined"
{...params}
placeholder="Search..."
InputProps={{
...params.InputProps,
type: "search",
classes: {
root: classes.root,
notchedOutline: classes.notchedOutline,
},
className: classes.input,
endAdornment: false,
}}
/>
)}
/>
</ThemeProvider>
);
}
You have to use the browser dev tools to identify the slot for the component you want to override. Once that's done, you write a CSS file with the class you want to change.
To force the class you can use :
!important
file : styles.css
exemple:
.css-1q6at85-MuiInputBase-root-MuiOutlinedInput-root{
border-radius: 50px!important;
}
How do you change the default 16px browser font-size to 10px using Material UI? As I understand it, MUI uses Nomralize.css under the hood?
In the my theme file I have
export default createMuiTheme({
overrides: {
MuiCssBaseline: {
'#global': {
html: {
padding: '0',
},
},
},
},
typography: {
htmlFontSize: 10,
fontSize: 8,
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
fontWeight: 400,
},
})
but I don't know if this is right..
My app is also wrapped with CssBaseLine
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
<App />
</MuiThemeProvider>
</Provider>,
document.getElementById('root'),
Is this correct? I remember the 62.5% trick and trying to accomplish something similar I guess
Your code is just fine and for future reference use use React DevTools to verify if your properties really apply or not (after React DevTools setup look for the ThemeProvider props).
I am following the example here [1] to create a custom theme using Material-UI. On Line 10 in App.js [2] it references color="textSecondary", can someone explain where the value textSecondary comes from?
I was able to get the example to work using:
style={{ color: theme.palette.secondary.light }}
but I'd prefer to be able to use the shorter syntax reference.
Full App.js code below:
import React from 'react';
import Container from '#material-ui/core/Container';
import Typography from '#material-ui/core/Typography';
import Box from '#material-ui/core/Box';
import ProTip from './ProTip';
import Link from '#material-ui/core/Link';
import theme from './theme';
function MadeWithLove() {
return (
<Typography variant="body2" style={{ color: theme.palette.secondary.light }} align="center">
{'Built with love by the '}
<Link color="inherit" href="https://material-ui.com/">
Material-UI
</Link>
{' team.'}
</Typography>
);
}
export default function App() {
return (
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
Create React App v4-beta example
</Typography>
<ProTip />
<MadeWithLove />
</Box>
</Container>
);
}
My theme.js file is:
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
palette: {
primary: {
light: '#6fbf73',
main: '#4caf50',
dark: '#357a38',
contrastText: '#fff',
},
secondary: {
light: '#5464c0',
main: '#2a3eb1',
dark: '#1d2b7b',
contrastText: '#000',
},
},
});
export default theme;
[1] https://github.com/mui-org/material-ui/tree/master/examples/create-react-app
[2] https://github.com/mui-org/material-ui/blob/master/examples/create-react-app/src/App.js#L10
If you have a look at the documentation for Typography component, you can provide several options for the color prop:
name: color
type: enum: 'initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error'
default: 'initial'
description: The color of the component. It supports those theme colors that make sense for this component.
textSecondary is defined here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Typography/Typography.js#L92 as
theme.palette.text.secondary
I was trying out Uber's deck.gl by adding the component to my react app. But nothing appears.
I believe it could be related to mapbox. It appeared once but that was it.
I set the width, height, etc. But nothing works.
This is basic example in their site.
Deck Gl with React
Here is my code. deckgl.component.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import { StaticMap } from 'react-map-gl';
import DeckGL, { LineLayer, ScatterplotLayer } from 'deck.gl';
const MAPBOX_ACCESS_TOKEN = '<MAPBOX_TOKEN>';
// Viewport settings
const INITIAL_VIEW_STATE = {
latitude: 37.785164,
longitude: -122.41669,
zoom: 16,
bearing: -20,
pitch: 60
};
class DeckGlComponent extends Component {
render() {
return (
<DeckGL initialViewState={INITIAL_VIEW_STATE} controller={true} width="100%" height="100%">
<StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
<LineLayer
data={[{ sourcePosition: [-122.41669, 37.7883], targetPosition: [-122.41669, 37.781] }]}
getStrokeWidth={5}
/>
<ScatterplotLayer
data={[{ position: [-122.41669, 37.79] }]}
radiusScale={100}
getFillColor={[0, 0, 255]}
/>
</DeckGL>
);
}
}
export default DeckGlComponent;
and index.js
import React from 'react';
import { render } from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import DeckGlComponent from './deckgl.component';
render(
<DeckGlComponent />,
document.getElementById('root')
);
serviceWorker.unregister();
It's absolutely basic. But nothing turns up. I created a new mapbox token just to be sure and still nothing.
According to your description (since there's not too much information), and mapbox token is active as you said, I suspect if you create a HTML file contains root element, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#root {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>
This file is required when you calling these codes:
render(
<DeckGlComponent />,
document.getElementById('root')
);
You can put your code on codepen or some online editors, so that we can help you more specifically.
Besides, I recommend you read codes in this folder https://github.com/uber/deck.gl/tree/master/examples/get-started rather than the codes in documents. Sometimes, codes in documents is for explaining concepts, and not ready for running.
The RTL demo provided in material ui guides seems does not work for components.
As they said in the Right-to-left guide internally they are dynamically enabling jss-rtl plugin when direction: 'rtl' is set on the theme but in the demo only the html input is rtl and TextField isn't.
Here's the demo code from https://material-ui-next.com/guides/right-to-left/#demo
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import TextField from 'material-ui/TextField';
const theme = createMuiTheme({
direction: 'rtl', // Both here and <body dir="rtl">
});
function Direction() {
return (
<MuiThemeProvider theme={theme}>
<div dir="rtl">
<TextField label="Name" />
<input type="text" placeholder="Name" />
</div>
</MuiThemeProvider>
);
}
export default Direction;
Once you have created a new JSS instance with the plugin, you need to
make it available to all components in the component tree. JSS has a
JssProvider component for this:
import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '#material-ui/core/styles';
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();
function RTL(props) {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
{props.children}
</JssProvider>
);
}