I am building a Material-UI text editor using draft.js and wrapping all the functionality in Material-UI components.
I've gotten comfortable using ~3.9 but for this project decided to update to 4.0. Maybe I'm missing something here but this usually works for me with no issues
const styles = theme => ({
paper: {
paddingBottom: theme.spacing(2)
},
...
})
import { withStyles } from "#material-ui/styles"
...
export class EditorComponent extends Component {
...
render() {
const { classes } = this.props
}
}
export default withStyles(styles, { withTheme: true })(EditorComponent)
This works while running in a webpack-dev-server but when I build to javascript and attempt to import it into another project and use it I get this error in the console...
Uncaught TypeError: theme.spacing is not a function
I can't seem to find anything relevant googling this issue.
Here is the repo if looking at my build script would help
https://github.com/jrdn91/material-ui-rte
Turns out that pulling in withStyles or makeStyles etc. from #material-ui/styles does not include the default theme. There are wrapped version of these included in #material-ui/core/styles which do include the default theme.
So changing from import { withStyles } from "#material-ui/styles" to import { withStyles } from "#material-ui/core/styles" will fix this issue.
Referenced from this page
https://material-ui.com/customization/default-theme/#material-ui-core-styles-vs-material-ui-styles
Related
This question already has an answer here:
Use calc() function in makeStyles
(1 answer)
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
I'm currently working on a react (v.17) project which uses Mui v5.0.4. I've written custom styles where needed and everything was working as expected. After a couple of days I started working on the same project and when I launched the application that the styles I wrote did not appear as expected. This happened in specific components like Typography, Button. I've thoroughly checked my code, tried on different browsers and computers but no luck.
I created a new project to see if the problem is just limited to the previous one but that doesn't seem to be the case either. I will post the code snippets of the app below for reference.
App.js
import React from 'react';
import Something from './something/Something';
function App() {
return <Something />;
}
export default App;
Something.js
import React from 'react';
import PropTypes from 'prop-types';
import { Typography } from '#mui/material';
import { withStyles } from '#mui/styles';
import styles from './Something.styles';
const Something = ({ classes }) => {
return <Typography className={classes.something}>Something</Typography>;
};
Something.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(Something);
Something.styles.js
const styles = (theme) => ({
something: {
fontWeight: 700,
color: '#FF0000'
}
});
export default styles;
I should mention that the color does apply but the font-weight doesn't. !important gets the job done but I didn't need it before this issue came up. The applied style class does appear in the browser inspector, of which I have attached a screenshot of below.
Click to check image
I'm also curious as to why the classname is .Something-something-1 and not .Something-something. Do ask for any additional information if needed. Any help is much appreciated. Thanks!
P.S. Here's a code sandbox to replicate the issue. Thanks!
https://codesandbox.io/s/long-sky-8jree
Solution (for this specific problem)
Use the following set of dependencies if you are using Mui v5.0.4
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#mui/material": "^5.0.4",
"#mui/icons-material": "^5.0.3",
"#mui/styles": "^5.0.1",
Wrap the elements in App.js with a component from Mui (Box, Grid etc.).
import React from "react";
import { Box } from "#mui/material";
import Something from "./Something/Something";
export default function App() {
return (
<Box>
<Something />
</Box>
);
}
I have updated the same code sandbox mentioned above with the working solution.
The easiest way to add style overrides for a one-off situation is to use the sx prop available on all MUI. reference
import styles from './Something.styles';
const Something = ({ classes }) => {
return <Typography sx={styles.something}>Something</Typography>;
//classes prop wasn't needed here
};
I want a directory selection dialog in my React App. I followed this SO thread that might work for some people but not for me.
Getting compile time error as
Property 'directory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'.
I upgraded react to the latest RC-version 17.rc.1 thinking that there may be a bug fix for this but no success.
Edit
There is a hack to add this script at the end of file using tag for directory selection, suggested by #Scratch'N'Purr in comments.
declare module 'react' {
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
// extends React's HTMLAttributes
directory?: string;
webkitdirectory?:string;
}
}
It works fine in Javascript but the problem is with Typescript. Guess, you are right about it being an issue.
You can set it manually using ref though.
import * as React from "react";
import "./styles.css";
export default function App() {
const ref = React.useRef<HTMLInputElement>(null);
React.useEffect(() => {
if (ref.current !== null) {
ref.current.setAttribute("directory", "");
ref.current.setAttribute("webkitdirectory", "");
}
}, [ref]);
return <input type="file" ref={ref} />;
}
I am following this tutorial of Gatsby about using Emotion. https://www.gatsbyjs.org/docs/recipes/styling-css#using-emotion
I installed the Emotion using npm install --save gatsby-plugin-emotion #emotion/core #emotion/styled and set up my gatsby-config.js file like this
module.exports = {
plugins: [`gatsby-plugin-emotion`],
}
But when I was using it like the tutorial did, I encountered a problem where the inline-css of the component is [object Object]
My component looks like this
import React from "react"
import { css } from "#emotion/core"
export default ({ children }) => (
<main
css={{
backgroundColor: "red",
}}
>
{children}
</main>
)
and I tried to rewrite using a different approach
import React from "react"
import { css } from "#emotion/core"
export default ({ children }) => (
<main
css={css`
background-color: red;
`}
>
{children}
</main>
)
this time the inline-css of the component is a paragraph
You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).
have no ideas why these two approach didn't work
This worked for me (without thorough understanding):
Approach 01
Replace this:
import React from "react"
import { css } from "#emotion/core"
with this:
/** #jsx jsx */
import { css, jsx } from "#emotion/core"
Approach 02
Update gatsby-config.js to contain the plugin gatsby-plugin-emotion:
module.exports = {
plugins: [
`gatsby-plugin-emotion`,
],
}
This needs a restart of the gatsby development process.
Description
I am trying to use Material-UI's theme.spacing function in a React application but the spacing function is not recognized.
The Javascript error message is: TypeError: theme.spacing is not a function
I am unsure if this is a bug or I have something wrong with the frameworks versions being installed.
Context
Here's the Github issue raised to address this problem.
Here's the repo with the offending code. The error is caught in the src\pages\index.js file, line 16:
paddingTop: theme.spacing(20)
Here's the sandboxed repo running where you can actually see the error message.
These are the frameworks versions being installed, according to the package-lock.json file:
Material-UI: v3.9.2
React: v16.8.1
Chrome: v72.0.3626.96
TypeScript: None
create-react-app: v3.2.2
Well, it turns out this is a bug after all, caused by request #14099.
A fix is on the way now, so I am closing this question.
For material ui version 5.1.0
the following worked for me (as #Worm said)
importing makestyles like this
import { makeStyles } from '#mui/styles';
remember to install #mui/styles
if you get a warning like
MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
wrap parent container with ThemeProvider
export default ParentComponentName = (props)=>{
return(
<ThemeProvider theme={theme}>
<SomeThemeComponent>
<SomeComponent />
</SomeThemeComponent>
<ThemeProvider>
)
}
Reference
https://mui.com/styles/api/#examples-4
PS: posted as new answer as I couldn't comment,because of credit limits.
Try this.
import { makeStyles } from '#material-ui/core/styles'
const userStyles = makeStyles (theme => ({
gridAlign : {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.secondary,
},
})
Before: import { makeStyles } from '#material-ui/core'; would work.
But now in the latest material UI versions we need to add the following import:
import { makeStyles } from '#material-ui/styles';
Try upgrading the #material-ui/core package to minimum version of 4.0.0.
Run npm i #material-ui/core#4.0.0
It solved my problem.
just do it next way:
const theme = createMuiTheme({
status: {
danger: orange[500],
},
});
export default function CustomStyles() {
return (
<ThemeProvider theme={theme}>
<CustomCheckbox />
</ThemeProvider>
);
}
Adding the import makes the bug go away:
import {makeStyles} from "#material-ui/**core**/styles";
Using MUI version 5 (V5.0.3), I get this error because the import of makeStyles must be
import { makeStyles } from '#mui/styles';
See here for the documentation: https://mui.com/styles/api/#heading-makestyles-styles-options-hook
with MUI V5 use npm install tss-react. https://mui.com/guides/migration-v4/#migrate-from-jss
I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?
To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));