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);
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.
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
How to center a material ui icon in a button?
import AddIcon from '#material-ui/icons/Add';
<Button><AddIcon style={{ bottom: 3, right: 3 }}/>ADD</Button>
enter image description here
There is a special type of button called Buttons with icons and label.
You can read more about it here.
To add custom styles to Material ui you need to makeStyles
Example
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
...
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
},
label: {
textTransform: 'capitalize',
},
});
...
const classes = useStyles();
return (
<AddIcon
classes={{
root: classes.root,
label: classes.label,
}}
>
//using a standard css colour
<BathroomTwoToneIcon style={{ color: "blue" }} />
//import a material ui colour, and use that
import { purple } from "#mui/material/colors";
<BathroomIcon style={{ color: purple[500] }} />