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.
Related
I'm working on a react app that uses MUI. We've been developing things within the "light" mode pallet, but would like to add the ability to switch things to a "dark" mode pallet. This change should affect only the colors defined within the pallet and not any of the other css/styling overrides.
I've done by best to understand the documentation and have looked at several different examples that I've found online, but none seem to show how to do this when your theme has more than just pallet. And including another pallet object gives a warning in the console, but I'm convinced there's a way to do this without reverting to just copying and pasting the components and typography parts of the theme to the dark version of the theme. Here's our current theme:
import { createTheme } from "#mui/material/styles";
export const appTheme = createTheme({
palette: {
mode: "light",
neutral: {
main: "#72ccda",
one: "#ffffff",
two: "#f5f5f5",
},
primary: {
main: "#72ccda",
one: "#9edce5",
two: "#72ccda",
},
info: {
main: "#72ccda",
one: "#9edce5",
two: "#72ccda",
},
},
typography: {
fontFamily:
'"Ubuntu", "Segoe UI", "Roboto", "Droid Sans", "Helvetica", "Arial", sans-serif',
},
components: {
MuiCssBaseline: {
// "normal" scss styling goes here and will override any MUI stuff
styleOverrides: `
.hidden {
display: none;
visibility: hidden;
},
.json {
width: 34vw;
min-wdith: 400px;
max-width: 800px;
height: 40vh;
min-height: 100px;
max-height: 450px;
overflow: scroll;
}
`,
},
},
});
export const darkTheme = createTheme({
palette: {
mode: "dark",
neutral: {
main: "#72ccda",
one: "#ffffff",
two: "#f5f5f5",
},
primary: {
main: "#72ccda",
one: "#9edce5",
two: "#72ccda",
},
info: {
main: "#34afc2",
one: "#9edce5",
two: "#72ccda",
},
},
typography: {
fontFamily:
'"Ubuntu", "Segoe UI", "Roboto", "Droid Sans", "Helvetica", "Arial", sans-serif',
},
components: {
MuiCssBaseline: {
// "normal" scss styling goes here and will override any MUI stuff
styleOverrides: `
.hidden {
display: none;
visibility: hidden;
},
.json {
width: 34vw;
min-wdith: 400px;
max-width: 800px;
height: 40vh;
min-height: 100px;
max-height: 450px;
overflow: scroll;
}
`,
},
});
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 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
}
}
});
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;
I have a React-mui draggable dialog component on which I am using resizable box.
const styles = theme => ({
resizable: {
position: "relative",
"& .react-resizable-handle": {
position: "absolute",
width: 20,
height: 20,
bottom: 0,
right: 0,
background:
"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
"background-position": "bottom right",
padding: "0 3px 3px 0",
"background-repeat": "no-repeat",
"background-origin": "content-box",
"box-sizing": "border-box",
cursor: "se-resize"
}
}
});
return (
<StyledDialog
open={open}
classes={{root: classes.dialog, paper: classes.paper}}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog"
>
<ResizableBox
height={520}
width={370}
minConstraints={[300, 500]}
maxConstraints={[Infinity, Infinity]}
className={classes.resizable}
>
<DialogContent classes={{root: classes.dialogContent}} id="draggable-dialog">
<IconButton className={classes.clearIcon} aria-label="Clear" onClick={onClose}>
<ClearIcon/>
</IconButton>
<iframe
src={hjelpemiddel.url}
title={hjelpemiddel.navn}
width="100%"
height="500px">
</iframe>
</DialogContent>
</ResizableBox>
</StyledDialog>
);
}
I would like to use my own icon instead of the default image used for the ResizableBox. How can I set the icon that I am importing from material icons as background of resizable?
import ZoomOutMapIcon from '#material-ui/icons/ZoomOutMap';
Material-UI is using SVG for the ZoomOutMapIcon. What I would do is convert that SVG to base64 then apply that to the background-url
This is its base64 output: PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg+PC9zdmc+
and I usually use makeStyles for overriding CSS when using Material UI
const useStyles = makeStyles({
resizable: {
position: "relative",
"& .react-resizable-handle": {
position: "absolute",
width: 20,
height: 20,
bottom: 0,
right: 0,
background:
"url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg+PC9zdmc+')",
"background-position": "bottom right",
padding: "0 3px 3px 0",
"background-repeat": "no-repeat",
"background-origin": "content-box",
"box-sizing": "border-box",
cursor: "se-resize"
}
}
});
<ResizableBox
className={classes.resizable}
>