I am using Material UI v5 Outlined TextField component to create a form. As shown in the picture below there is a white padding border coming in the TextField. I have made CSS that input field color changes to yellow on focus.
My code is as follows
// CSS
.OutlinedTextFieldCSSStyle {
font-size: 13px !important;
padding: 0 !important;
}
// Material-Ui styles
export const useStyles = makeStyles({
OutlinedTextField: {
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#949595", // grey color
borderWidth: 1.5,
},
"&:hover fieldset": {
borderColor: "#949595", // grey color
},
"&.Mui-focused fieldset": {
outline: "none",
borderColor: "#949595", // grey color
boxShadow: "0 5px 5px 0px #949595",
},
},
"& .Mui-focused": {
"& .MuiOutlinedInput-input": {
backgroundColor: "#FFFF80 !important", // yellow color
borderColor: "#FFFF80 !important", // yellow color
borderWidth: 0,
outline: "none",
},
},
"& .MuiOutlinedInput-input": {
backgroundColor: "#F5F5F5 !important",
borderWidth: 0,
outline: "none",
borderColor: "white !important",
},
}
});
// TextField
<TextField
{...params}
type="text"
size="large"
variant="outlined"
fullWidth
className={classes.OutlinedTextField}
InputProps={{
...params.InputProps,
classes: {
input: "OutlinedTextFieldCSSStyle",
},
}}
/>
How can I remove this white padding border so that the textfield entire background color is yellow/grey and the font size covers the entire textbox ?
You can add your padding: 0 into your .MuiOutlinedInput-input style definitions:
export const useStyles = makeStyles({
OutlinedTextField: {
// ... your other styles
"& .MuiOutlinedInput-input": {
backgroundColor: "#F5F5F5 !important",
borderWidth: 0,
outline: "none",
borderColor: "white !important",
padding: 0 // <-- added zero padding instruction
}
}
});
Related
There is this Codepen with a working tripple hover effect on an image: Codepen
When I try to rebuild it as styled component on React Typescript with MUI and MUI Image accepted by MUI I am getting an error in my style={...} and cant get it to work in my React App. Can anyone help why? I declared my css in a const styles and apply it inline.
App.tsx
import React from 'react';
import { Box } from '#mui/material';
import Image from 'mui-image';
const styles = {
body:{
background: "#3d4552",
fontFamily: "arial",
fontSize: "12px",
color: "#fff",
},
img: {
border: "1px solid #d2d2d2",
padding: "3px",
boxShadow: "0 0 15px rgba(0,0,0,.1)",
},
picContainer: {
maxWidth: "210px",
maxHeight: "210px",
margin: "50px",
},
pic: {
background: "#fff",
position: "absolute",
transition: "all 0.2s ease",
backfaceVisibility:"hidden",
},
"pix:nth:child(1)": {
zIndex: 3,
},
"pic:nth-child(2)": {
zIndex: 1,
},
"pic:nth-child(3)": {
zIndex: 2,
},
"picContainer:hover .pic:nth-child(1)": {
transform: "rotate(15deg)",
transition: "all 0.5s ease",
},
"picContainer:hover .pic:nth-child(2)": {
transform: "rotate(7deg)",
transition: "all 0.10s ease",
},
"picContainer:hover .pic:nth-child(3)": {
transform: "rotate(-5deg)",
},
picCaption: {
background: "#82a3d4",
padding: "10px 15px",
color: "#fff",
fontSize: "12px",
position: "relative",
zIndex: "10",
top: "90px",
left: "200px",
borderRadius: "3px",
transition: "all 0.5s ease",
opacity: 0,
},
"picCaption:hover": {
background: "#607fae",
},
"picContainer:hover .pic-caption": {
left:"230px",
opacity: 1,
},
};
function Hover() {
return (
<Box style={styles.picContainer}>
<Image src="https://via.placeholder.com/150" style={styles.pic} />
<Image src="https://via.placeholder.com/150" style={styles.pic} />
<Image src="https://via.placeholder.com/150" style={styles.pic} />
</Box>
);
}
export { Hover };
The error:
(property) MuiImageProps.style?: React.CSSProperties | undefined
Type '{ background: string; position: string; transition: string; backfaceVisibility: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
Types of property 'backfaceVisibility' are incompatible.
Type 'string' is not assignable to type 'BackfaceVisibility | undefined'.ts(2322)
index.d.ts(28, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & MuiImageProps & { children?: ReactNode; }'
First of all, I minified the styles object by removing unused or erroneous styles such as picCaption or pix:nth:child(1). I've also replaced all occurrences of :nth-child() with :nth-of-type() since nth-child is potentially unsafe.
For this solution there are only two relevant style objects, picContainer which will be applied to the outer <Box/> and img for the mui <Image/> wrapper. The pic class can be referenced inside the styling object. We can make use of nesting to avoid repetition, analogous to scss this also works here.
const styles = {
picContainer: {
maxWidth: "210px",
maxHeight: "210px",
margin: "50px",
"&:hover": {
".pic:nth-of-type(1)": {
transform: "rotate(15deg)",
transition: "all 0.5s ease",
},
".pic:nth-of-type(2)": {
transform: "rotate(7deg)",
transition: "all 0.10s ease",
},
".pic:nth-of-type(3)": {
transform: "rotate(-5deg)",
},
},
".pic": {
position: "absolute",
transition: "all 0.2s ease",
backfaceVisibility: "hidden",
"&:nth-of-type(2)": {
zIndex: 1,
},
"&:nth-of-type(3)": {
zIndex: 2,
},
},
},
img: {
backgroundColor: "#fff",
border: "1px solid #d2d2d2",
padding: "3px",
boxShadow: "0 0 15px rgba(0,0,0,.1)",
},
};
Now since its my first time working with <Image/> from mui-image I found it tricky here. The image gets wrapped inside a MUI image class which comes with its own styling. Using wrapperClassName and custom width, height was necessary here to avoid the image from being expanded and stretched.
// Hover.tsx
return (
<Box sx={styles.picContainer}>
<Image
wrapperClassName="pic"
width={150}
height={150}
src="https://via.placeholder.com/150"
style={styles.img}
/>
<Image
wrapperClassName="pic"
width={150}
height={150}
src="https://via.placeholder.com/150"
style={styles.img}
/>
<Image
wrapperClassName="pic"
width={150}
height={150}
src="https://via.placeholder.com/150"
style={styles.img}
/>
</Box>
);
The result is identical to the Codepen that has been provided in the question:
I am following their documentation from Here to modify default Paper component properties.
Here is my code.
import { styled } from '#mui/material/styles';
import { Modal, Button, TextField, Grid, Paper } from '#mui/material';
const Item:any = styled(Paper)(({theme}) => ({
// ...theme.typography.body2,
root: {
boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
},
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
'& .MuiPaper-root': {
boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
}
}));
const MyComponent = (props: any) => {
return (
<Grid container>
<Grid item xs={8}>
<Item elevation={1} square variant="outlined">xs=8</Item>
</Grid>
</Grid>
)
}
What am I doing wrong here?
You should change the value of boxShadow, current value is white and is diapered, change to black like below.
Try this code, I tested, worked for me:
const Item = styled(Paper)(({theme}) => ({
padding: theme.spacing(1),
textAlign: 'center',
color: '#000',
backgroundColor: 'pink',
boxShadow:'3px 3px 5px 3px rgb(0 0 0 ,0.2)'
}));
I am using TextField to select the time. But when I'm choosing the time, the timepicker works fine with the Chrome browser but down icon changes to cross icon in Firefox.
Here is the screenshot what I need in FireFox. But in chrome it is working perfectly fine. I only need in firefox:
Here is what I'm getting in firefox:
Here is the code I've done so far:
<TextField
id="time"
type="time"
style={{
width: "148px",
marginLeft: 6,
marginRight: 6,
padding: "2px 0px 3px 6px",
}}
defaultValue="03:30"
value={timeChange}
onChange={handleTimeChange}
className={classes.textField}
color="secondary"
InputProps={{
disableUnderline: true,
classes: {
input: classes.floatingLabelFocusStyle,
},
}}
/>;
And CSS is here:
const useStyles = makeStyles((theme) => ({
select: {
color: "black",
},
icon: { color: "#c4c4c4" },
textField: {
font: "normal normal normal 14px Open Sans",
background: "#FFFFFF 0% 0 % no - repeat padding- box",
border: "1px solid #C4C4C4",
borderRadius: "2px",
color: "#f5f5f5",
},
floatingLabelFocusStyle: {
font: "normal normal normal 14px Open Sans",
},
input: {
color: "white",
},
}));
And SCSS:
input[type="time"]::-webkit-calendar-picker-indicator {
margin-right: 7px;
cursor: pointer;
background:url(https://www.materialui.co/materialIcons/hardware/keyboard_arrow_down_grey_27x27.png);
}
Any fix for this?. Thank you.
I am using the react mui library to create a tooltip for my application. I got the tooltip set up easy enough, but I am running into issues when I attempt to style it. I get the required style but I can not see the arrow of the tooltip unless I am zoomed in a considerable amount.
The styles
import Tooltip from '#material-ui/core/Tooltip';
import {withStyles} from "#material-ui/core"
const CustomTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: '#FFFFFF',
color: '#1C2023',
border: '2px solid #A7AFB3',
fontSize: '10px',
fontWeight: '600',
lineHeight: '12px',
textAlign: 'center',
boxSizing: 'border-box',
padding: '5px 14px 5px 20px',
fontFamily: 'Open Sans',
},
arrow: {
color: '#FFFFFF',
'&::before': {
border: '2px solid #A7AFB3'
}
}
}))(Tooltip)
export default CustomTooltip;
In my file themeConfig.js I have declared some theme variables that I use throughout my app to style various components. I need to use the scrollbar -webkit to persist a scrollbar for certain components. The -webkit styles are long and bulky, so I want to be able to add them to my themeConfig.js file. These scrollbar styles are pseudo-elements and while I can assign them, I haven't been able to figure out how to use them in themeConfig.js.
themeConfig.js
const myTheme = createMuiTheme({
layout: {
header: 64,
sideNav: 45,
mainDivHeight: 250,
...
}
})
export default myTheme
ComponentExample.js
import { makeStyles } from '#material-ui/core'
const ComponentExample = () => {
const classes = useStyles()
return (
<div className={classes.mainDiv}>I'm a div</div>
)
}
const useStyles = makeStyles(theme => ({
mainDiv: {
height: theme.layout.mainDivHeight,
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: 8,
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.2)',
outline: '1px solid slategrey',
borderRadius: 7,
},
}
}))
export default ComponentExample
It would be great if I could stuff this into a variable in my theme file and apply it to a component:
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: 8,
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.2)',
outline: '1px solid slategrey',
borderRadius: 7,
},
But the way theme styles are declared in makeStyles, there is a 1:1 property assignment and I don't know how to gracefully apply a whole style object like that to a component. Any advice is greatly appreciated!
The styles declared in makeStyles are within an object and that object can be constructed in any of the ways JavaScript supports. The way I would handle this is to put the styles that you want to use within a single object in the theme (scrollbarStyles in my example below) and then use object spread syntax in the place where you want to use it within makeStyles.
Here is a working example:
import React from "react";
import {
createMuiTheme,
ThemeProvider,
makeStyles
} from "#material-ui/core/styles";
const myTheme = createMuiTheme({
layout: {
header: 64,
sideNav: 45,
mainDivHeight: 250,
scrollbarStyles: {
overflowY: "scroll",
"&::-webkit-scrollbar": {
width: 8
},
"&::-webkit-scrollbar-track": {
boxShadow: "inset 0 0 6px rgba(0,0,0,0.00)",
webkitBoxShadow: "inset 0 0 6px rgba(0,0,0,0.00)"
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "rgba(0,0,0,.2)",
outline: "1px solid slategrey",
borderRadius: 7
}
}
}
});
const useStyles = makeStyles(theme => ({
mainDiv: {
...theme.layout.scrollbarStyles,
height: theme.layout.mainDivHeight
}
}));
function ComponentExample() {
const classes = useStyles();
return (
<div className={classes.mainDiv}>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
</div>
);
}
export default function App() {
return (
<ThemeProvider theme={myTheme}>
<ComponentExample />
</ThemeProvider>
);
}