Material UI InputProps endAdornment: Icon doesn't display inside input - javascript

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.

Related

MUI radio button styling inside MuiFormControlLabel

I'm using MUI with ReactJs and I have implemented a radio group, and I want to override the default style.
I achieved the desired style, but my problem is I can't check if the radio button is checked or not from the FormControlLabel. The label color and background color should change if the radio button is checked!
<RadioGroup
row
name="row-controlled-radio-buttons-group"
value={gender}
onChange={onChangeGender}
sx={{ margin: "10px" }}
>
<FormControlLabel
value="m"
control={
<Radio
sx={{
"&.Mui-checked": {
".MuiRadio-root": {
bgcolor: "#F27A38",
color: "#F21138",
},
},
display: "none",
}}
/>
}
sx={formControlSubTabs}
label="Male"
/>
<FormControlLabel
value="f"
control={
<Radio
sx={{
"&.Mui-checked": {
color: "#F27C38",
},
display: "none",
}}
/>
}
sx={formControlSubTabs}
label="Female"
/>
</RadioGroup>
This the formControlSubTabs javascript object for the sx attribute :
const formControlSubTabs = {
".MuiFormControlLabel-label": {
color: "#F27C38",
fontFamily: "Roboto , Helvetica , Arial , sans-serif",
fontSize: "14px",
fontWeight: "200",
m: "auto",
},
".MuiFormControlLabel-checked": {
".MuiFormControlLabel-label": { bgcolor: "#F27A38" ,color: "#F21138",},
},
border: 1,
borderColor: "#F27C38",
borderRadius: 3,
p: 1,
width: "80px",
mx: 1,
};
export default formControlSubTabs;
PS: I already have a useState for gender value and onChangeGender method to set the gender.

onChange function is not enabling to enter more values in Material UI Text Field

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

Styling TextField in DesktopDatePicker Material UI

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.

How to customize button css in react-admin

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.

How to style adornment in MUI TextField?

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>
),
}}
/>

Categories