Self-taught dev here.
I am trying to style a textfield rendered by a DesktopDatePicker in a react application. I can change the width using MakeStyles, but can't seem to change the height of the box, or the font of the input text. My code is as follows:
const useStyles = makeStyles(() => ({
textField: {
width: "90%",
height: "75%",
marginLeft: "auto",
marginRight: "auto",
paddingBottom: 0,
marginTop: 0,
},
input: {
height: "70%",
fontSize: "small",
}
}));
const classes = useStyles();
return (
<div >
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
inputFormat="MM/dd/yyyy"
selected={new Date(initialVal)}
size="small"
onChange={(newDate) => {
setDateBirth(newDate);
setFieldValue("dateBirth", newDate);
}}
renderInput={(params) => <TextField
className={classes.textField}
sx={{ color: 'red', display: 'inline', fontSize: 8, height: "75%" }}
variant='outlined'
size="small"
InputProps={{
className: classes.input,
}}
{...params} />}
/>
</LocalizationProvider>
</div>
)
}
This renders the following:
MUI styling
The only thing I have been able to do to change the box size is the inline size="small" property. Thanks in advance.
Related
I have a custom TextField component in my app but I am not able to increase the value of first TextField since it has onChange method whereas the second TextField doesn't have onChange method hence I am able to increase it's value.
import React, { useContext, useRef, useCallback, useState } from "react";
import {
Card,
CardContent,
CardActions,
TextField,
Button,
CardHeader,
Select,
MenuItem,
InputAdornment,
} from "#mui/material";
import CircularProgress from "#mui/material/CircularProgress";
import { alpha, styled } from "#mui/material/styles";
import UserContext from "../../context";
import polygonLogo from "../../assets/polygon-matic-token-icon.png";
import usdcTokenLogo from "../../assets/usdc-token-icon.png";
import "./index.css";
function UniSwapWidget() {
const [inputToken, setInputToken] = useState("Matic");
const [outputToken, setOutputToken] = useState("USDC");
const [inputTokenValue, setInputTokenValue] = useState("0.0");
const [outputTokenValue, setOutputTokenValue] = useState(0.0);
const [fetchPriceWaiter, setFetchPriceWaiter] = useState(false);
const { signerAddress, logIn, loginWaiter } = useContext(UserContext);
const UNI = "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984";
const connectors = useRef(null);
const focusConnectors = useCallback(() => connectors.current?.focus(), []);
const CustomCard = styled(Card)(({ theme }) => ({
borderRadius: "24px",
padding: "8px",
boxShadow:
"rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px, rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px",
}));
const CustomCardContent = styled(CardContent)(({ theme }) => ({
display: "flex",
flexDirection: "column",
gap: "0.3rem",
}));
const CustomButton = styled(Button)(({ theme }) => ({
backgroundColor: "rgb(253, 234, 241)",
color: "rgb(213, 0, 102)",
width: "100%",
boxShadow: "none",
fontWeight: 500,
padding: "16px",
borderRadius: 20,
"&:hover": {
backgroundColor: "rgb(252, 220, 232)",
boxShadow: "none",
},
}));
const CustomSelect = styled(Select)(({ theme }) => ({
borderRadius: "16px",
height: "fit-content",
backgroundColor: "rgb(237, 238, 242)",
borderColor: "white",
"#demo-simple-select": {
display: "flex",
alignItems: "center",
gap: "0.3rem",
fontSize: "18px",
fontWeight: 500,
},
"&:hover": {
backgroundColor: "rgb(232, 0, 111)",
},
}));
const onHandleInputTokenValueChange = (e)=>{
e.preventDefault();
setInputTokenValue(e.target.value);
// setFetchPriceWaiter(true);
}
return (
<div className="uniswap">
<CustomCard sx={{ minWidth: 275 }}>
<CardHeader
title={
<span>
<b>Swap</b>
</span>
}
/>
<CustomCardContent>
<div className="input-token-div">
<TextField
id="outlined-basic"
placeholder="0.0"
// label={inputTokenValue === "" ? "0.0" : ""}
onChange={onHandleInputTokenValueChange}
// value={inputTokenValue}
fullWidth
required
variant="standard"
type="number"
InputLabelProps={{ shrink: false }}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ width: "10rem" }}>
<CustomSelect
labelId="demo-simple-select-label"
id="demo-simple-select"
value={inputToken}
InputLabelProps={{ shrink: false }}
sx={{
width: "100%",
}}
onChange={(e) => {
setInputToken(e.target.value);
setOutputToken(
e.target.value === "Matic" ? "USDC" : "Matic"
);
}}
>
<MenuItem
value={"Matic"}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={polygonLogo} className="token-logo"></img>
Matic
</MenuItem>
<MenuItem
value={"USDC"}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={usdcTokenLogo} className="token-logo"></img>
USDC
</MenuItem>
</CustomSelect>
</InputAdornment>
),
disableUnderline: true,
}}
/>
</div>
<div className="output-token-div">
<TextField
placeholder="0.0"
id="outlined-basic"
variant="standard"
type="number"
InputLabelProps={{ shrink: false }}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ width: "10rem" }}>
<CustomSelect
labelId="demo-simple-select-label"
id="demo-simple-select"
value={outputToken}
InputLabelProps={{ shrink: false }}
sx={{
width: "100%",
backgroundColor: "rgb(232, 0, 111)",
color: "white",
}}
onChange={() => console.log("chaning")}
>
<MenuItem
value={"Matic"}
disabled={inputToken === "Matic" ? true : false}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={polygonLogo} className="token-logo"></img>
Matic
</MenuItem>
<MenuItem
value={"USDC"}
disabled={inputToken === "USDC" ? true : false}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={usdcTokenLogo} className="token-logo"></img>
USDC
</MenuItem>
</CustomSelect>
</InputAdornment>
),
disableUnderline: true,
}}
/>
</div>
{fetchPriceWaiter ? (
<div className="price-div">
<CircularProgress sx={{ margin:0 }} size={25} />
Fetching Best Price...
</div>
) : null}
</CustomCardContent>
<CardActions>
{signerAddress !== "" ? (
<CustomButton variant="contained">
Swap
</CustomButton>
) : (
<CustomButton
variant="contained"
disabled={loginWaiter}
onClick={logIn}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{loginWaiter ? (
<CircularProgress sx={{ marginRight: 1 }} size={25} />
) : null}
Connect Wallet
</CustomButton>
)}
</CardActions>
</CustomCard>
</div>
);
}
export default UniSwapWidget;
I don't know why it's happening. I am using Material UI 5.10.3. May anyone knows what's wrong here?
Solution
Finally I have found the solution. Need to pass onChange function to InputProps. Reference: Mask Textfield component in Material-UI
I am new to react-admin, and how to customize react admin buttons?
In my scenario I have a list also in create, edit, and export button there and I don't know which is the best way to change button css in react-admin. Can anyone solve this?
By default I have button like above mentioned, so I need to add css for this two buttons.
Here is my sample code
// style list
const useStyles = makeStyles((theme) => ({
userCard: {
padding: "20px",
borderRadius: "12px",
},
btn_edit: {
background: "#5E35B1",
color: "#fff",
fontSize: "10px",
},
mainList: {
boxShadow: "none !important",
borderRadius: "0px",
},
listCreateIcon: {
padding: "0px !important",
},
}));
//main
export const UserList = (props) => {
const classes = useStyles();
return (
<Card className={classes.userCard}>
<List
{...props}
pagination={null}
perPage={9999}
className={classes.mainList}
>
<Datagrid className={classes.listCard}>
<TextField source="username" />
<BooleanField source="enabled" />
<ReferenceArrayField reference="_roles" source="roles">
<SingleFieldList>
<ChipField source="name" />
</SingleFieldList>
</ReferenceArrayField>
<EditButton className={classes.btn_edit} />
</Datagrid>
</List>
</Card>
);
};
export const UserCreate = (props) => {
const classes = useStyles();
return (
<Create {...props} className={classes.listCreateIcon}>
<SimpleForm style={{ padding: "0px !important" }}>
<TextInput source="username" />
<TextInput type="password" source="password" />
<ReferenceArrayInput source="roles" reference="_roles" allowEmpty>
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
<BooleanInput source="enabled" defaultValue={true} />
</SimpleForm>
</Create>
);
};
export const UserEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<TextField source="username" />
<ReferenceArrayInput source="roles" reference="_roles">
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
<BooleanInput source="enabled" />
</SimpleForm>
</Edit>
);
This will work for you.
btn_create: {
display: "inline-flex",
alignItems: "center",
gridGap: 4,
backgroundColor: "transparent",
borderColor: "transparent",
fontSize: 16,
color: "blue" // the text color you want
// if you are using the svg icon
svg : {
width: 16,
height: 16,
path: {
fill : "blue" //color code of icon
}
}
},
btn_group: {
display:"flex",
gridGap: "16px",
alignItems: "Center",
}
on Component
<div className={classes.btn_group}>
<EditButton className={classes.btn_create} />
<EditButton className={classes.btn_create} />
</div>
PS. If the icon is font icon, you may not use the svg styling.
having a small problem with displaying icon inside a custom input.
My code is:
<TutorialsCommentInput
placeholder="Write your opinion..."
style={{ padding: "20px" }}
fullWidth="true"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Icon />
</InputAdornment>
),
}}
/>
TutorialCommentInput:
export const TutorialsCommentInput = withStyles((theme) => ({
input: {
borderRadius: 0,
backgroundColor: '#262626',
fontSize: '15px',
fontWeight: 500,
padding: '2px 8px 2px',
height: '42px',
color: '#B6B6B6',
fontFamily: [
'Nunito',
'sans-serif'
]
}
}))(InputBase)
I've followed every step to do so, the Icon works completely fine outside the input, no clue what's wrong.
Here is the datepicker component
import React, { Fragment, useState } from "react";
import {
KeyboardDatePicker,
MuiPickersUtilsProvider
} from "#material-ui/pickers";
import DateFnsUtils from "#date-io/date-fns";
import makeStyles from "#material-ui/styles/makeStyles";
const useStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
padding: 0,
"& .MuiButtonBase-root": {
padding: 0,
paddingLeft: 10
},
"& .MuiInputBase-input": {
padding: 15,
paddingLeft: 0
}
}
}
});
function InlineDatePickerDemo(props) {
const [selectedDate, handleDateChange] = useState(new Date());
const classes = useStyles();
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
className={classes.root}
autoOk
variant="inline"
inputVariant="outlined"
label="With keyboard"
format="MM/dd/yyyy"
value={selectedDate}
InputAdornmentProps={{ position: "start" }}
onChange={(date) => handleDateChange(date)}
/>
</MuiPickersUtilsProvider>
);
}
export default InlineDatePickerDemo;
From codeSandbox Link can anyone tell how to remove border from all sides ?
Although I managed to know that .MuiInput-underline:before style class is responsible for border width but dont know where to put that class in makeStyles.
You just need to edit a bit the KeyboardDatePicker element:
Remove inputVariant="outlined"
Add
InputProps={{
disableUnderline: true
}}
CodeSandbox
in MUI you can add variant="standard" to TextField :
renderInput={(params) => <TextField variant="standard" {...params} />}
completely :
<DesktopDatePicker
inputFormat="MM/dd/yyyy"
className="mt-0 w-100"
required={required}
margin="normal"
id="date-picker-dialog"
label={label}
format="dd/MM/yyyy"
value={value}
onChange={handleDateChange}
renderInput={(params) => <TextField variant="standard" {...params} />}
/>
It's just necessary to remove inputVariant="outlined" props. So your code becomes:
<KeyboardDatePicker
className={classes.root}
autoOk
variant="inline"
label="With keyboard"
format="MM/dd/yyyy"
value={selectedDate}
InputAdornmentProps={{ position: "start" }}
onChange={(date) => handleDateChange(date)}
/>
Here your code modified.
const useStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
padding: 0,
"& .MuiButtonBase-root": {
padding: 0,
paddingLeft: 10,
},
"& .MuiInputBase-input": {
padding: 15,
paddingLeft: 0
},
"& .MuiOutlinedInput-notchedOutline": {
border: 'none'
}
}
}
});
I am trying to add just the default 14px padding-left set by startAdornment and want to make it so the adornment takes up half of the TextField instead. I can't seem to figure out how to style the startAdornment in general.
I tried style the div itself, this works but there is still an underlying 14px padding left. I tried styling the InputAdornment itself but it seems to have no effect.
InputProps={
this.state.didChange[rowIndex] ? {
startAdornment: (
<InputAdornment
position="start"
component="div"
style={{paddingLeft: '-14px'}}
disablePointerEvents>
<div style={{ backgroundColor: '#D3D4D0', marginLeft: '-14px', padding: "10px 13px", width: "26px", color: '#a1a39b' }}>
{prevVals[rowIndex]}
</div>
</InputAdornment>
)
} : null} />
This is the result of my current code:
This is what I want:
You can ignore the border color difference that doesn't matter I can change that.
there are adornedStart and adornedEnd classes in FilledInput and OutlinedInput classes.so you can either use them or use TextField
InputProps dependig on what variant you use.
<TextField
name={'text'}
variant="outlined"
InputProps={{
endAdornment:
<IconButton onClick={()=>0}>x</IconButton>,
classes: {
adornedEnd: classes.adornedEnd
}
}}
/>
here is CodeSandbox
You can change the background color of the InputAdornment by removing the padding left of the OutlinedInput and set a matching padding in your adornment (based on the padding of the input here);
import MuiTextField from '#mui/material/TextField';
import { styled } from '#mui/material/styles';
const TextField = styled(MuiTextField)(({ theme }) => ({
'& .MuiOutlinedInput-root': {
paddingLeft: 0,
},
'& .MuiInputAdornment-root': {
backgroundColor: theme.palette.divider,
padding: '28px 14px',
borderTopLeftRadius: theme.shape.borderRadius + 'px',
borderBottomLeftRadius: theme.shape.borderRadius + 'px',
},
}));
<TextField
placeholder="Password"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Visibility />
</InputAdornment>
),
}}
/>