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.
Related
I am trying to build Address form dialog with Google places api.
The problem is, when I use react-google-autocomplete's usePlacesWidget with MUI TextField, Google place dropdown menu is not showing up on Material UI Dialog.
I have tried adding style to .pac-container, but it still did not work.
const useStyles = makeStyles((theme) => ({
dialog: {
// the dropdown is next to the dialog root, not inside
'& .pac-container': {
zIndex: '9999 !important',
},
},
}));
<Dialog className={classes.dialog}/>
This is what I've done.
Does anyone know how to solve this problem?
Use This Custom Modal
import Dialog from '#mui/material/Dialog';
import { withStyles } from '#material-ui/styles';
const styles = theme => ({
root: {
marginTop: 24,
padding: theme.spacing(2),
position: 'absolute',
zIndex: '7 !important',
right: '0px',
bottom: '0px',
top: '0px',
left: '0px',
},
closeButton: {
position: "absolute",
right: theme.spacing(1),
top: theme.spacing(2),
color: theme.palette.grey[500]
}
});
const CustomDialog = withStyles(styles)(Dialog);
I am trying to add a border color to a styled component using MUI:
const Style = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
borderColor: theme.palette.success.main,
border: 10,
borderTop: 10,
width: INFO_WIDTH
}));
However, I don't see any change in the effect:
Screenshot of browser
I'm trying to follow the guidelines specified by MUI but it's not working. Does anyone know a workaround?
The guidelines you linked to are for the sx prop (or lower-level usage of #mui/system) -- not the styled API. One key difference between the two is that for the sx prop, a numeric border value is treated as a shorthand for ${value}px solid. The styled API does not automatically add solid, so border: 10 just becomes border: 10px which is not sufficient for causing a border to be displayed.
A separate issue with your example is that you specify borderColor before border. Since border is a shorthand for border-width, border-style, and border-color, even when you don't specify a color with the border value, a previously specified border-color will be overridden with the default.
Below is an example showing the correct syntax for specifying the border for both sx and styled:
import * as React from "react";
import Box from "#mui/material/Box";
import { styled } from "#mui/material/styles";
const StyledDiv = styled("div")(({ theme }) => ({
border: "10px solid",
borderColor: theme.palette.success.main,
width: "5rem",
height: "5rem",
margin: theme.spacing(1)
}));
export default function BorderSubtractive() {
return (
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box
sx={{
border: 10,
borderColor: "success.main",
width: "5rem",
height: "5rem",
m: 1
}}
/>
<StyledDiv />
</Box>
);
}
The need arises when there are multiple thumbs in a slider. In such a scenario, it is not known which thumb the user intends to move by clicking the track.
Solution:
When multiple thumbs are present, the values can only be controlled by moving the thumb:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, makeStyles } from '#material-ui/core/styles';
import Slider from '#material-ui/core/Slider';
import Typography from '#material-ui/core/Typography';
import Tooltip from '#material-ui/core/Tooltip';
const useStyles = makeStyles((theme) => ({
root: {
width: 300 + theme.spacing(3) * 2,
},
margin: {
height: theme.spacing(3),
},
}));
const AirbnbSlider = withStyles({
root: {
color: '#3a8589',
height: 3,
padding: '13px 0',
},
thumb: {
height: 27,
width: 27,
backgroundColor: '#fff',
border: '1px solid currentColor',
marginTop: -12,
marginLeft: -13,
boxShadow: '#ebebeb 0 2px 2px',
'&:focus, &:hover, &$active': {
boxShadow: '#ccc 0 2px 3px 1px',
},
'& .bar': {
// display: inline-block !important;
height: 9,
width: 1,
backgroundColor: 'currentColor',
marginLeft: 1,
marginRight: 1,
},
},
active: {},
track: {
height: 3,
},
rail: {
color: '#d8d8d8',
opacity: 1,
height: 3,
},
})(Slider);
function AirbnbThumbComponent(props) {
return (
<span {...props}>
<span className="bar" />
<span className="bar" />
<span className="bar" />
</span>
);
}
I was facing the same issue and stumbled onto this question.
I am using styled components to create overridden styles on the Slider component. You can also do this by the classes attribute provided internally by Material UI.
I was able to solve it by doing two things:
Set pointer-events: none !important on the class MuiSlider-root.
Set pointer-events: all !important on the class MuiSlider-thumb.
You can check out a working solution here: https://codesandbox.io/s/busy-mcclintock-1hw1x?file=/src/MultiRangeSlider.jsx:366-381
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.
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);