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>
);
}
Is there a way to change only the box-shadow color for mui Paper component. I made my background black so it's shadow is not visible
I've used
createMuiTheme({
overrides: {
MuiPaper: {
root: {
boxShadow: "0 1px 6px 1px blue"
}
}
}
}
as you can see when I give that boxShadow setting every elevation from 0 to 24 uses it
What I need is a way to change just the shadow color, thanks for your help
You can change the shadow color , but for a specific elevate you will need to change values if you are using sass or css to over ride , using withStyle you can do it like this
Refer this sandbox
https://codesandbox.io/s/infallible-platform-kemqg?file=/src/App.js:0-682
import "./styles.css";
import { makeStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(1),
width: theme.spacing(16),
height: theme.spacing(16),
boxShadow:
"0px 3px 1px -2px red,0px 2px 2px 0px rgba(100,0,0,0.9),0px 1px 5px 0px rgba(0,0,0,0.12)"
}
}
}));
export default function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<Paper elevation={2} />
<Paper elevation={4} />
<Paper elevation={3} />
</div>
);
}
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] }} />
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);
I am using the react-select component along with bootstrap v4
all of bootstraps stuff is based on 35px height it seems, the default height of the react-select component is 38px, which looks a little odd.
Any ideas how I can change the height of the component?
It is using some weird JS styling library I have never come across before. I have managed to get it to mimic the outline on focus using it, but the height escapes me, any help much appreceiated
You can play with it here
Spending hours, I end up with this to get exact 30px height of react select with border 1px:
const customStyles = {
control: (provided, state) => ({
...provided,
background: '#fff',
borderColor: '#9e9e9e',
minHeight: '30px',
height: '30px',
boxShadow: state.isFocused ? null : null,
}),
valueContainer: (provided, state) => ({
...provided,
height: '30px',
padding: '0 6px'
}),
input: (provided, state) => ({
...provided,
margin: '0px',
}),
indicatorSeparator: state => ({
display: 'none',
}),
indicatorsContainer: (provided, state) => ({
...provided,
height: '30px',
}),
};
You can add your styles to any part of the select components, take a look at the relevant docs
here is a working demo of what you ask for.
In your case the code that you need to add will look something like this:
const customStyles = {
control: base => ({
...base,
height: 35,
minHeight: 35
})
};
and in the select component:
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[0]}
isDisabled={isDisabled}
isLoading={isLoading}
isClearable={isClearable}
isRtl={isRtl}
isSearchable={isSearchable}
name="color"
options={colourOptions}
styles={customStyles}
/>
The reason why you're not able to make it less than 36px is that the dropdownIndicator and indicatorContainer(clear icon is displayed) are taking 20px (icon) + 8px padding in all sides. If you reduce that padding, the minHeight will actually work.
dropdownIndicator: (styles) => ({
...styles,
paddingTop: 7,
paddingBottom: 7,
}),
clearIndicator: (styles) => ({
...styles,
paddingTop: 7,
paddingBottom: 7,
}),
You can play around with the padding of the dropdownIndicator and clearIndicator.
I noticed that you can't go under 30px in minHeight because of the valueContainer, unless you change its height/padding.
CSS Way
You can specify classNamePrefix and use it to override CSS styles.
<Select classNamePrefix="mySelect" />
.mySelect__value-container{
height: 35px;
}
I was barely able to make the Select component as small as 32px (in my browser) using the theme attribute. It works well when the height is greater than 45px. You can also omit the baseUnit attribute.
It didn't work for small sizes.
const theme = (theme: Theme) => ({
...theme,
spacing: {
...theme.spacing,
controlHeight: 30,
baseUnit: 0,
}
});
<Select options={props.options} theme={theme}/>
I was able to over write the menu-list's css style:
/* over write css in react-select module */
.Select__menu-list {
max-height: 120px !important;
}
If you only want to resize the box use this.
.create-select {
width: 160px;
float: right;
color: #000;
[class$="ValueContainer"] {
min-height: 28px !important;
max-height: 28px;
}
[class$="IndicatorsContainer"] {
min-height: 28px !important;
max-height: 28px;
}
[class$="-Input"] {
min-height: 28px !important;
max-height: 28px;
padding: 0px;
}
[class$="-control"] {
min-height: 28px !important;
max-height: 28px;
}
}
Cause
The .control has a min-height of 38px defined.
Fix
Change the min-height on the .control to your desired height.
const customStyles = {
control: (provided, state) => ({
...provided,
minHeight: '30px',
...additionalStyles
}),
};
In my case, I had to just set the css height property for the class
__value-container
Here is the code:
.react-select__value-container {
height: 3rem;
}
export const customStyles = {
control: (provided: Record<string, unknown>, state: any) => ({
...provided,
height: 42,
boxShadow: 'none',
borderColor: 'none',
'&:hover': {
color: '#60B3D1'
},
border: state.isFocused ? '1.5px solid #60B3D1' : '1.5px solid #cbd5e1'
}),
option: (styles: any, state: any) => ({
...styles,
color: state.isSelected ? '#FFF' : styles.color,
backgroundColor: state.isSelected ? '#60B3D1' : styles.color,
borderBottom: '1px solid rgba(0, 0, 0, 0.125)',
'&:hover': {
color: '#FFF',
backgroundColor: '#60B3D1'
}
}),
input: (base: any) => ({
...base,
'input:focus': {
boxShadow: 'none',
border: '1px solid #60B3D1'
}
}),
menuPortal: (base: any) => ({ ...base, zIndex: 9999 })
}
<Select styles={customStyles } />
This really works well for me