I'm trying to use the ubuntu-mono font in react with chakra-UI. So, I referred to the chakra-UI [docs][1].
However, the change could not be reflected.
My ```theme.ts``` and ```App.tsx``` are below.
theme.ts
import { extendTheme } from "#chakra-ui/react";
const theme = extendTheme({
fonts: {
heading: "Ubuntu-mono",
body: "Ubuntu-mono",
},
styles: {
global: {
body: {
backgroundColor: "black",
color: "white",
}
}
}
})
export default theme;
App.tsx
import * as React from "react"
import {
ChakraProvider, Container,
} from "#chakra-ui/react"
import {BrowserRouter} from "react-router-dom";
import theme from "./theme/theme";
import '#fontsource/ubuntu-mono/700.css';
import {Router} from "./router/Router";
export const App = () => (
<ChakraProvider theme={theme}>
<BrowserRouter>
<Router/>
</BrowserRouter>
</ChakraProvider>
)
Of course, I have run npm install with the package.json that includes the "#fontsource/ubuntu-mono": "^4.5.6" line in its dependencies.
I also referred to another doc of the chakra-UI, however, I could not find out describes regarding this problem.
Although, this may an easy problem, anyone who gives me a solution.
I'm guessing this has to do with the environment. I tried it initially in CodeSandbox but the font didn't load but when I ran it locally using Vite app, it worked just fine.
What environment are you working in? See my repo here: https://github.com/estheragbaje/test-fonts
Related
I'm moving app from Material UI v4 to v5 and I'm facing few issues.
One of them is that property 'palette' in not recognised by DefaultTheme from Material UI once it's used in makeStyles. That component worked properly in v4, but once I moved majority to v5 it shows me an error now and don't recognise 'palette' property. Can You please look at it and let me know how to fix it ?
this is how it's called in main component:
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles((theme) => ({
styledButton: {
'&': { color: theme.palette.cerulean },
'&.Mui-selected': {
backgroundColor: theme.palette.aliceBlue,
color: theme.palette.cerulean,
},
'&:hover': {
backgroundColor: 'rgba(227,245,255, 0.5) !important',
},
},
}));
When I hover over above 'palette' TS give a comment like: Property 'palette' does not exist on type 'DefaultTheme'.
Theme is called in App as below:
import { ThemeProvider } from '#mui/styles';
import { MainTheme } from '#nevomo/utilities';
export const App: FC = () => (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={MainTheme}>
<SCThemeProvider theme={MainTheme}>
<CssBaseline />
<Router>
<AuthContextProvider>
<Notifications />
<RoutingManager />
</AuthContextProvider>
</Router>
</SCThemeProvider>
</ThemeProvider>
</StyledEngineProvider>
);
MainTheme looks like:
import { createTheme, Theme } from '#mui/material/styles';
import { paletteColors } from './main-theme-colors';
export const MainTheme: Theme = createTheme({
spacing: (factor: number) => `${factor * 1}rem`,
palette: {
primary: {
main: paletteColors.primary.main,
},
secondary: {
main: paletteColors.secondary.main,
},
error: {
main: paletteColors.error.main,
},
white: '#FFFFFF',
lighterBlue: '#EFFBFF',
lightBlue: '#DEF7FF',
celeste: '#00A7E1',
blue: '#0027d3',
navy: '#083D77',
greenSalad: '#4DA167',
red: '#d32f2f',
pink: '#FFE3E3',
lightPink: '#ECD6E6',
darkPink: '#700353',
black: '#000000',
orange: '#FD5C01',
darkRed: '#AD160B',
aliceBlue: '#E3F5FF',
cerulean: '#007CBA',
},
});
thanks a lot !
The OP resolved their issue, but I'll leave this from the MUI migration documentation for future people facing the same problem:
[Types] Property "palette", "spacing" does not exist on type 'DefaultTheme'
Since makeStyles is now exported from #mui/styles package which does
not know about Theme in the core package. To fix this, you need to
augment the DefaultTheme (empty object) in #mui/styles with Theme from
the core.
TypeScript Project
Put this snippet to your theme file:
// it could be your App.tsx file or theme file that is included in your tsconfig.json
import { Theme } from '#mui/material/styles';
declare module '#mui/styles/defaultTheme' {
// eslint-disable-next-line #typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
interface DefaultTheme extends Theme {}
}
Javascript Project
If your IDE (ex. VSCode) is able to infer types from d.ts file,
create index.d.ts in your src folder with this snippet:
// index.d.ts
declare module "#mui/private-theming" {
import type { Theme } from "#mui/material/styles";
interface DefaultTheme extends Theme {}
}
Current MUI version fixes the DefaultTheme type error this way—
// global.d.ts
import { Theme } from '#mui/material/styles';
declare module '#mui/system' {
interface DefaultTheme extends Theme {}
}
I'm using v4 and I was hitting this issue.
The issue was because I was using
import { useTheme } from '#material-ui/styles';
instead of
import { useTheme } from '#material-ui/core/styles';
I'm new to react and I'm trying to using makestyles and this is how :
in Header.jsx :
import React from "react";
import UseStyles from "./Header_style";
function Header() {
const classes =UseStyles();
return (
<div className={"Main-Header"}>
<div className={"Header-Logo"}>
<div className={classes.test}>test</div>
</div>
</div>
);
};
export default Header;
and style.js :
import {makeStyles} from '#material-ui/styles';
const UseStyles = makeStyles(theme=>({
test: {
backgroundColor: '#BDC3C7',
color :'red !important',
widtH : '18%'
},
}));
export default UseStyles;
but I'm getting folwing error:
×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
*edit:
This is how I'm using Header :
import React, { Component } from 'react'
import Header from './component/heder/Header.jsx';
class App extends Component {
constructor() {
super();
this.state = {
monsters: [],
searchField: ''
};
}
render() {
return (
<Header/>
);
}
}
export default App;
and another thing, I'm getting following error too :
When you place your Header component in the return or render of a parent component make sure you use <Header /> and not {Header}
additionally if that's not the problem you can check this link which is the official react thread on that error.
Also posting how you render the component that is throwing the error would be very helpful.
Edit* Additionally you don't need to call makeStyles with a function. Since you are not using the theme, you can just call makeStyles with an object like this
const useStyles = makeStyles({
test: {
background: 'white',
width: '100%'
}
});
EDIT and additional answers:
Here's a snippet from MUI's official page on styles:
The way you import makeStyles:
import { makeStyles } from '#material-ui/styles
If you import this way you have to have applied the #material-ui/styles module.
If instead in your package.json you use '#material-ui/core and haven't installed #material-ui/styles you could be getting that error because you don't have the module #material-ui/styles.
If you just have #material-ui/core you can still import makeStyles without installing the standalone #material-ui/styles it is all included in #material-ui/core.
Simply import it like this instead:
import { makeStyles } from '#material-ui/core/styles'
everybody, I've found the solution!
have to use withStyles.
I have set up deep linking in my project with react-navigation. It is successfully working in android. But in ios, it is opening the app successfully but does not route to the correct location.
this is how I code it with react-navigation.
import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {Linking} from 'react-native';
import AppStackNavigator from '_navigations/AppStackNavigator';
import I18n from 'i18n-js';
export default function App() {
const linking = {
prefixes: ['https://mydomain/meeting','myapp://meeting'],
config: {
screens: {
login: 'login/:data',
},
},
};
return (
<NavigationContainer linking={linking} >
<AppStackNavigator />
</NavigationContainer>
);
}
As this one is not working then I tried it with getInitialState using use linking hook. Then the initial state was always undefined. I do not have any idea to fix this. I tried almost all the examples I was able to find to fix this issue. But I was unable to do so. If someone can help me to fix this it is really really grateful. Thank you.
react-navigation:"^5.2.16",
react:"16.11.0"
react-native:"0.62.2"
ios:14.2
xcode: 12
I need to pass a theme that is used in components but I get a syntax error.
My .storybook/config.js:
import { configure, addDecorator } from '#storybook/react'
import React from 'react'
import theme from '../src/theme'
import { ThemeProvider } from 'styled-components'
import '../src/styles/index.css'
addDecorator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>)
function loadStories() {
const req = require.context('../src', true, /\.stories.js$/)
req.keys().forEach(filename => req(filename))
}
configure(loadStories, module)
Here's the full error:
Have you tried making the theme provider as a separate file without using the decorators? The below is a Styled-components and typescript implementation.
import React from 'react';
export const Container = ({ title, children }) => {
return (
<StoryWrapper>
<GlobalStyle theme={themes.default} />
<ThemeProvider theme={themes.default}>
<MainWrapper>
<Header>{title}</Header>
{children}
</MainWrapper>
</ThemeProvider>
</StoryWrapper>
);
};
I never used the add decorator feature and this was the config implementation I used, it is set up for tsx though.
import { addParameters, configure, addDecorator } from '#storybook/react';
import { withKnobs } from '#storybook/addon-knobs';
const req = require.context('../src', true, /.stories.tsx$/);
function loadStories(){
req.keys().forEach(req);
}
addDecorator(withKnobs);
configure(loadStories, module);
Seems like Babel is confused that you're using JSX in a JS file.
Try renaming config.js to config.jsx. The file extension should instruct babel to treat it as a JSX file.
EDIT: I installed the v1.0.0.36 beta version and copied the sample from that versions docs (which looks identical to me) and it worked straight away. Not sure what the problem was but thanks for replies
I am trying to use Material-UI's withTheme to access the theme in a component.
I have followed the sample in the docs which goes through the create-react-app packager ok but in the browser gives the error: TypeError: Object(...) is not a function
and highlights the code line > 17 | export default withTheme()(WithTheme);
I have cut down the sample code to the most basic use of withTheme() and am still receiving this error
withtheme.js
import React from 'react';
import { withTheme } from 'material-ui/styles';
function WithTheme() {
const styles = {
primaryText: {
color: 'red',
}
};
return (
<h1 style={styles.primaryText}>Hello</h1>
);
}
export default withTheme()(WithTheme);
EDIT: To help clarify the problem, here is the App.js file.
import React, { Component } from 'react';
import './App.css';
import 'typeface-roboto';
import AppBar from 'material-ui/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {brown500, brown900} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import WithTheme from './components/withtheme';
const Theme = getMuiTheme({
palette: {
primary1Color: brown900,
primary2Color: brown500,
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={Theme} >
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more" />
<WithTheme />
</MuiThemeProvider>
);
}
}
export default App;
I have customised the theme and changed primary1Color to brown, using muiThemeProvider. This all works fine when I remove the WithTheme component from App.js - the AppBar is brown as expected. The problem is I am getting the error when I try to use the mui withTheme function.
My intention is to set the h2 in WithTheme component to be whatever color the current theme has for primary1Color
**End Edit
Any help would be appreciated. Happy to post the (almost) exact copy of the doco sample code which achieves the same error if required.
Thanks
As MaterialUI is no longer in Beta, the spec has changed a bit, outdating Liam's answer. Per the Material-UI
v3.1.2 docs
import { withTheme } from '#material-ui/core/styles';
export default withTheme()(WithTheme);
As of Material 4, the spec was changed a bit again: https://material-ui.com/styles/api/#withtheme-component-component (thus outdating Awnage's answer too).
So now it is:
import { withTheme } from '#material-ui/styles';
export default withTheme(MyComponent);
No need to use withStyles() unless if you want to make a specific style for the component
Warp your App with MuiThemeProvider then you are able to use the theme properly
Material-Ui 0.20.0
For access theme colors use getMuiTheme
import getMuiTheme from 'material-ui/styles/getMuiTheme';
export default muiThemeable()(App)
http://www.material-ui.com/#/components/app-bar
Working Demo
Material-Ui 1.0.0 beta
For access theme colors use withTheme
import { withTheme } from 'material-ui/styles';
export default withTheme()(App)
https://material-ui-next.com/demos/app-bar/
Working Demo V1
If you intend to change the theme of material-ui, I would prefer using getMuiTheme. Refer http://www.material-ui.com/#/customization/themes for documentation. What happens here is, you are styling your component with JavaScript and hence the export requires withStyles to be called.
export default withStyles(styles)(WithTheme);