I'm getting an invalid hook call error when I run my app in the browser. The error appears when I use makeStyles in my app ( I checked by removing it and the error goes away). Can someone help me find out what I'm doing wrong? Here is my code:
import React, { useState} from 'react';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
header: {
background: '#C4C4C4',
textAlign: 'center',
boxShadow: '0px 2px 2px #A9A9A9',
fontFamily: 'PT Sans Caption',
fontSize: '36px',
marginBottom: '20px',
paddingTop: '20px',
textTransform: 'uppercase',
position: 'fixed',
top: 0,
width: '100%',
display: 'flex',
justifyContent: 'space-between',
},
});
const Header = (props) => {
const classes = useStyles();
const [ title ] = useState(props.title)
return (
<div className={classes.header}>{title}</div>
);
};
export default Header;
Any help would be great!
i dont see problem in your code just for test change this :
remove useState
<div className={classes.header}>{props.title}</div>
or for test
<div className={classes.header}>title</div>
I'm not entirely sure what the issue was, but I solved it by running np install, exiting out of the browser, and running npm start. When the browser loaded back up, the error was gone.
Related
I am trying to move my div(bar) as my states gets updated using props. but this error occurs.
import React, { useState } from "react";
import { data as TableData } from "../Table/alan_requested_format";
import "./styles.css";
export const Playhead = (props) => {
const [incVal, setIncVal] = useState(0);
let width = 15;
let incrementedValue = (width / TableData.duration) * props.currentTime;
console.log("incrementedValue", incrementedValue);
setIncVal(incrementedValue);
const style = {
backgroundColor: "#ffffff",
border: "6px solid #ffffff",
height: "75px",
width: `${width}px`,
borderRadius: "5px",
position: "absolute",
left: { incVal },
padding: "0px 4px 0px 4px",
};
return (
<>
<div class="vl" style={style}></div>
</>
);
};
When I try to run this code the code bursts. The whole web page got crashed.
You wrote your setter setIncVal inside the render function (function component's body), therefore you actually trigger state change on every render which causes the infinite loop.
I believe you wanted to trigger this change only on currentTime change, therefore use the proper API with useEffect:
let width = 15;
export const Playhead = (props) => {
const [incVal, setIncVal] = useState(0);
useEffect(() => {
let incrementedValue = (width / TableData.duration) * props.currentTime;
console.log("incrementedValue", incrementedValue);
setIncVal(incrementedValue);
}, [props.currentTime]);
const style = {
backgroundColor: "#ffffff",
border: "6px solid #ffffff",
height: "75px",
width: `${width}px`,
borderRadius: "5px",
position: "absolute",
left: { incVal },
padding: "0px 4px 0px 4px",
};
return (
<>
<div class="vl" style={style}></div>
</>
);
};
This works fine for me.
import React from "react";
import "./styles.css";
export const Playhead = (props) => {
let incrementedValue = props.TableData.duration / window.innerWidth;
const style = {
backgroundColor: "#ffffff",
border: "1px solid #ffffff",
height: "95px",
borderWidth: '2px',
width: "2px",
borderRadius: "5px",
position: "absolute",
left: incrementedValue * props.currentTime,
padding: "0px 4px 0px 4px",
};
return (
<>
<div class="vl" style={style}></div>
</>
);
};
ReactJS newbie question. I have a searchbar component, as shown below, which includes two other components (LocationLookup & EmergencyService), both of which make use of "makeStyles" in their respective components and are styled without issue. However, I'm trying to apply a field separator to appear between each of the components within the searchbar component but for some reason the styles aren't being applied. Note that I've tried adding some additional CSS to change the font color and background color to the "fieldSeparator" class as well just to confirm that the issue isn't with the current before/after selectors. Doesn't matter what CSS I add to "fieldSeparator", it doesn't apply to those two components. FYI, the "searchBarContainer" CSS is applied to the searchbar container without issue. Not sure if this a props or state issue. Any tips on what I might be doing wrong would be much appreciated. Thanks in advance!
import React from 'react';
import { makeStyles, withStyles } from '#material-ui/core/styles';
import LocationLookup from "./LocationLookup";
import EmergencyService from "./EmergencyService";
const useStyles = makeStyles((theme) => ({
searchBarContainer: {
width: "calc(100% - 300px)",
height: "44px",
float: "left",
flexGrow: "1",
border: "1px solid #989586",
borderRadius: "9999px",
backgroundColor: "#fbfbf8",
margin: "0"
},
fieldSeparator: {
'&::after': {
content: '""',
borderRight: "1px solid #ccc9b3",
position: "absolute",
top: "10px",
width: "1px",
right: "0",
height: "20px",
bottom: "0"
},
'&::before': {
content: '""',
borderRight: "1px solid #ccc9b3",
position: "absolute",
top: "10px",
width: "1px",
right: "0",
height: "20px",
bottom: "0"
},
'&:hover': {
'&::after': {
display: "none"
},
'&::before': {
display: "none"
}
},
}
}));
export default function SearchBar() {
const classes = useStyles();
return (
<div className={classes.searchBarContainer}>
<LocationLookup className={classes.fieldSeparator} />
<EmergencyService className={classes.fieldSeparator} />
</div>
);
}```
**Why not using HTM/HTML/xml formats instead? The format look abit mix-up... thanks.. the structure are base Webbase or kernel Base? **
Make sure that you have drilled down the props to your components like this:-
const LocationLookup = (props) => {
return (
<div {...props}>
Hello
</div>
)
}
Go to your components LocationLookup and EmergencyService and make sure they are properly getting the props.
What exactly I want to do is to clip the background with only text using the CSS in Reactjs.
I have used Material UI for designing the page in react.
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles({
root: {
minWidth: 275,
},
loginCard: {
width: '100%',
height: '100vh',
display: 'grid',
placeItems: 'center',
},
emailInput: {
margin: '0px 0px 20px 0px'
},
actions: {
padding: '16px'
},
submitBtn: {
marginLeft: 'auto',
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 25,
textAlign: 'center',
fontWeight: 'bold',
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
'&::-webkit-background-clip': 'text',
'&:: -webkit-text-fill-color': 'transparent'
},
pos: {
marginBottom: 12,
},
})
export default useStyles;
how to add background-clip property using CSS in js using react material UI?
to add -webkit-background-clip css style you've to use WebkitBackgroundClip in cssJS.
WebkitBackgroundClip compiles down to -webkit-background-clip.
Here is the working example of clipping the background with only text using only CSS in js
import React from "react";
import "./styles.css";
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
body:{
background: 'black',
textAlign: 'center',
padding: '120px 20px',
width:'100vw',
height:'100vh'
},
heading:{
display: 'inline-block',
fontSize: '80px',
lineHeight: 0.9,
padding: '20px',
fontFamily: "'Syncopate', sans-serif",
textTransform: 'uppercase',
background: 'radial-gradient(circle farthest-corner at center center,white,#111) no-repeat',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}
}));
export default function App() {
const classes = useStyles();
return (
<div className={classes.body}>
<h1 className={classes.heading}>mega<br/>fancy</h1>
</div>
);
}
codesandbox link:- https://codesandbox.io/s/competent-poincare-zx3lb
I've been following some examples on how to setup Material-UI with React.
Whatever I try, I'm getting back the following error:
Error: Minified React error #321; visit
https://reactjs.org/docs/error-decoder.html?invariant=321 for the full
message or use the non-minified dev environment for full errors and
additional helpful warnings.
This seems to be Hook related, but I can't find any reason why this happens.
The component
Button
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
};
function ButtonComp(props) {
const { classes } = props;
return <Button className={classes.root}>Higher-order component</Button>;
}
export default withStyles(styles)(ButtonComp);
Implemented like this
import * as React from 'react';
import ButtonComp from './ButtonComp';
const App = ({ children }) => {
return (
<React.Fragment>
<ButtonComp />
<main>
{children}
</main>
</React.Fragment>
);
};
export default (App);
I'm running on react#16.11.0 and #material-ui/core#4.5.1.
What am I missing here? I can't find the problem at all.
I tried to create a custom styled button with material ui to reuse in other files of my project. Somehow, the button does not adapt the style i defined. Could someone tell me where I made a mistake / forgot something ?
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import IconButton from '#material-ui/core/IconButton';
const styles = themes => ({
root: {
margin: "50px",
padding: "20px",
display: 'block'
},
button: {
marginTop: '20px',
padding: '100px',
height: "300px+15vh",
width: "300px+15vw",
borderRadius: "20% 20%",
color: '#FFFFFF',
backgroundColor: '#05164D',
'&:hover': {
backgroundColor: "rgba(5, 22, 77, 0.75)",
boxShadow: '0 3px 5px 2px rgba(153, 153, 153, .8)'
},
},
});
const styledButton = props => {
const { classes } = props;
return (
<div>
<IconButton className={classes.button} {...props} aria-label="Gift" disableTouchRipple="true">
{props.children}
</IconButton>
</div>
)
}
export default withStyles(styles)(styledButton);