I'm trying to render a material-ui component inside renderToStaticMarkup (because I have to integrate with another library) but none of the css styles are applied:
import * as React from "react";
import ReactDOM from "react-dom/client";
import Button from "#mui/material/Button";
import { styled } from "#mui/material";
import { renderToStaticMarkup } from "react-dom/server";
const StyledButton = styled(Button)(() => ({
backgroundColor: "red"
}));
ReactDOM.createRoot(document.querySelector("#root")).render(
<React.StrictMode>
<div
dangerouslySetInnerHTML={{
__html: renderToStaticMarkup(<StyledButton>Test</StyledButton>)
}}
/>
</React.StrictMode>
);
https://codesandbox.io/s/heuristic-bouman-d1mogi?file=/index.js:0-527
Related
Hello ,I am new to React and Now I would like to use MATERIAL-UI in my project but I got this error. Help me, please.
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:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I Have Index.js Component:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
ReactDOM.render(
<React.Fragment>
<App />
</React.Fragment>,
document.getElementById("root")
);
registerServiceWorker();
and App.js is the functional Component:
import React from 'react'
import Layout from './Layout/Layout'
function App() {
return <Layout/>
}
export default App
and Styles.js Component from material-ui:
import { makeStyles } from "#material-ui/styles";
const useStyles = makeStyles({
root: {
display: "flex",
height: "100vh",
width: "100%",
},
rightSidebar: {
background: "#BDC3C7",
width:'18%'
},
leftSidebar: {
background: "#BDC3C7",
width:'25%'
},
mainPart: {
background: "#BDC3C7",
flex:1
},
});
export default useStyles;
and Layout.js Component is:
import React from "react";
import useStyles from "./Styles";
function Layout() {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.rightSideba}>right side bar</div>
<div className={classes.mainPart}>main part</div>
<div className={classes.leftSidebar}>left side bar</div>
</div>
);
}
export default Layout;
Thank you
Start simple: What React / React DOM versions do you have?
Then: Does your environment (browser?) start multiple instances of React / React DOM? (esp. any older ones dangling around)
I wanted to update CssBaseline component whenever the theme was changed by button, but it didn't.
Whenever button is clicked, theme seemed to be changed, but what CssBaseline did hasn't been changed such as body's background color, etc.
Is there any way to change it?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
App.js
import React, { useState, useEffect } from 'react';
import './App.css';
import { Button, Container } from '#material-ui/core';
import Title from './components/Title';
import { lightTheme, darkTheme } from './libs/Theme';
import { MuiThemeProvider, CssBaseline } from '#material-ui/core';
function App() {
const [theme, setTheme] = useState(darkTheme);
const handleClick = () => {
theme.palette.type === 'dark' ? setTheme(lightTheme) : setTheme(darkTheme);
}
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Button variant="contained" color="primary" onClick={handleClick}>Change Theme</Button>
<Container maxWidth="xl">
<Title />
</Container>
</MuiThemeProvider>
);
}
export default App;
libs/Theme.js
import { createMuiTheme, responsiveFontSizes } from '#material-ui/core';
export const lightTheme = responsiveFontSizes(
createMuiTheme({
palette: {
type: 'light'
}
})
);
export const darkTheme = responsiveFontSizes(
createMuiTheme({
palette: {
type: 'dark'
}
})
);
This is probably the work of <React.StrictMode>. Take those tags out and it should work. You can track this issue: https://github.com/mui-org/material-ui/issues/20708 for the bug and its possible resolution.
Note that this answer was written on MUI latest release v4.11.0
I am new to react and trying to pass props from one functional component to another.
Here is component 1:
import React from 'react'
import TeamItem from './TeamItem'
import KKR from '../../assets/smith.jpeg'
export default function Teams() {
return (
<div>
<TeamItem title={1} />
</div>
)
}
Here is component 2:
import React from "react";
import "./teams.css";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Typography from "#material-ui/core/Typography";
import KKR from '../../assets/smith.jpeg'
const useStyles = makeStyles({
card: {
maxWidth: 445
},
media: {
height: 240
}
});
export default function TeamItem(props) {
const classes = useStyles();
console.log(props.title, '>>>>>>>>>>>>>')
return (
<h1>{props.title}</h1>
);
}
The props.title is undefined here. I am not sure where I am wrong.
Hi #dodo As you described here Code is looking completely fine to me. I tried it locally and got the value 1 from props.title. please try restarting your server.
I am using material-UI in my react web app.
I want to test my component with jest in way that styles would be saved in snapshot of component like what jest-styled-component do for styled-component but I cant.
you can see my sample project in codesandbox
but here are the important parts:
I create my project with create-react-app with this command:
npx create-react-app myapp
this is my index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {MuiThemeProvider} from '#material-ui/core/styles';
import theme from './customTheme';
ReactDOM.render(
<MuiThemeProvider theme={theme}>
<App/>
</MuiThemeProvider>,
document.getElementById('root')
);
this is my customTheme.js file in src folder:
import {createMuiTheme} from '#material-ui/core/styles';
const theme = createMuiTheme({
typography: {
fontFamily: [
'Roboto',
'"Segoe UI"',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
},
palette: {
color: 'blue',
}
});
export default theme;
and this is my App.js that I want to test:
import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
export const styles = theme => ({
mystyle: {
fontFamily: theme.typography.fontFamily,
border: '1px solid green',
background: 'yellow',
color: theme.palette.color,
},
});
function MyComponent(props) {
const {classes} = props;
return (
<div>
<p className={classes.mystyle}> my text </p>
<Button className={classes.mystyle}>my button</Button>
</div>
);
}
MyComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MyComponent);
please notice that I am overwriting styles with JSS and I have my own theme.
I want to get snapshot from component in way that css be part of snapshot like this issue from material-UI's repository in github or like what jest-styled-component-do for styled-component. for reaching that goal I wrote this code in my demo.test.js:
import React from "react";
import renderer from "react-test-renderer";
import App from '../App';
import {styles} from '../App';
describe("snapshot test", () => {
it("should match snapshot", () => {
const wrapper = renderer
.create(<App classes={styles}/>)
.toJSON();
expect(wrapper).toMatchSnapshot();
});
});
but with this test my styles are not in snapshot therefore if I change mystyle in App component the snapshot test will not fail.
I have read bellow resources but couldn't get what I wanted:
https://github.com/mui-org/material-ui/issues/9492
https://github.com/mui-org/material-ui/issues/6834
thanks for any feedback
Trying to use an outlined button from material UI : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/buttons/OutlinedButtons.js
But get the error - "Unexpected use of 'self' no-restricted-globals"
And I don't have permissions to change it in the lodash.throttle/index.js file.
Is there any workaround for this that anyone knows of?? (It's literally just the sample code btw)
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '../node_modules/#material-ui/core/styles';
import Button from '../node_modules/#material-ui/core/Button';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});
function OutlinedButtons(props) {
const {classes} = props;
return (
<div>
<Button variant="outlined" className={classes.button}>
Default
</Button>
</div>
);
}
OutlinedButtons.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(OutlinedButtons);
After a request. App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import UserGroup from './components/user_group';
import ButtonTest from './components/Button';
import OutlinedButtons from './components/floatingButton'
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<header className="App-header">
{ OutlinedButtons }
</header>
</div>
</MuiThemeProvider>
);
}
}
export default App;
And index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();