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);
Related
Here is the demo link. Right now I give root a border style. However, I want to remove the border style when the switch is checked. How would I do this? Thanks for the help!
import * as React from "react";
import Switch from "#mui/material/Switch";
import { withStyles } from "#material-ui/core/styles";
const label = { inputProps: { "aria-label": "Switch demo" } };
const CustomSwitch = withStyles({
root: {
width: "40px",
height: "20px",
padding: "0px",
borderRadius: "10px",
marginRight: "8px",
border: "1px solid #606060",
position: "relative"
},
colorSecondary: {
"&.Mui-checked + .MuiSwitch-track": {
backgroundColor: "#05756C"
},
"&.Mui-checked": {
color: "white"
}
},
thumb: {
position: "absolute",
width: "12px",
height: "12px"
},
track: {
backgroundColor: "transparent"
},
switchBase: {
color: "#606060",
"&$checked": {
// color: 'white!important',
}
}
})(Switch);
export default function BasicSwitches() {
return (
<div>
<CustomSwitch {...label} />
</div>
);
}
Remove the border from the parent (SwitchBase) and put it in the track component inside so it can be targeted by CSS selector when the state of the sibling element changes:
root: {
...
// border: '1px solid #606060', // <-------------------- comment this line
},
track: {
backgroundColor: 'transparent',
borderRadius: '10px',
border: '1px solid #606060',
height: 'auto',
opacity: 1,
},
switchBase: {
color: '#606060',
'&.Mui-checked + $track': {
border: 'none',
},
},
Since you're using v5, you shouldn't use withStyles anymore, it is deprecated and will be removed in v6. Here is the equivalent demo in v5 using styled instead.
Before anyone removes this question and says it is similar to this one please hear me out. I am trying to do almost exactly what is being done in that post. The issue is the person who responded just gave some CSS which does not answer the question at hand. I am trying to do this FULLY in MUI. I would preferably want to be able to style my component using the makeStyles hook.
How would one implement an underline animation below a typography component such as the ones on the navigation bar here? I am really new to JS and MUI so I would appreciate something which is well explained and implemented so I can learn the terminology as well as the frameworks themselves.
This is my code so far. It's just like the one in the first link.
const useStyles = makeStyles({
link: {
color: "white",
position: "relative",
"&:before": {
content: "",
position: "absolute",
width: "0",
height: "2px",
bottom: "0",
left: "0",
backgroundColor: "#FFF",
visibility: "hidden",
transition: "all 0.3s ease-in-out",
},
"&:before:hover": {
visibility: "visible",
width: "100%"
}
}
});
function NavButton(props){
const classes = useStyles();
return (
<a href={`/#${props.text}`}>
<Link className={classes.link}>
<Typography>{props.text}</Typography>
</Link>
{/*<p className={"hover-underline-animation"}*/}
{/* {props.text}*/}
{/*</p>*/}
</a>
);
}
I am receptive to any other types of input. These questions are just as much a way for me to learn as a way to get an answer.
Working code
const useStyles = makeStyles({
link: {
color: 'white',
position: 'relative',
'&:before': {
content: "''",
position: 'absolute',
width: '0',
height: '2px',
bottom: '-3px',
left: '50%',
transform: 'translate(-50%,0%)',
backgroundColor: 'red',
visibility: 'hidden',
transition: 'all 0.3s ease-in-out',
},
'&:hover:before': {
visibility: 'visible',
width: '100%',
},
},
});
<Link underline="never" className={classes.link}>
<Typography component="span">link</Typography>
</Link>
Some explanation why your code didn't work:
Change content: "" to content: "''". Related answer.
Add underline="never" to Link to remove the built-in underline in the anchor element when hovering.
Change the Typography's root component to span or set its display to inline to make the container width and the underline width match the text content.
Change &:before:hover to &:hover:before: The former means hover the underline to run the animation, but its width is 0 so it can't be hovered, the latter means hover the link to run the line animation.
Add these 2 lines to make the underline expands from the middle:
left: '50%',
transform: 'translate(-50%,0%)',
I have spent hours trying to find the right combination to use Link and override the webkit underline to prevent the links in my navigation from having an underline without explicitly adding text-decoration: none to my global CSS. I had to add 'textDecoration: 'none' to the makeStyles function in this example and of course change red to blue but this works beautifully for my nav bar.
const useStyles = makeStyles({
link: {
color: 'white',
position: 'relative',
textDecoration: 'none',
'&:before': {
content: "''",
position: 'absolute',
width: '0',
height: '2px',
bottom: '-3px',
left: '50%',
transform: 'translate(-50%,0%)',
backgroundColor: 'blue',
visibility: 'hidden',
transition: 'all 0.3s ease-in-out',
},
'&:hover:before': {
visibility: 'visible',
width: '100%',
},
},
})
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
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