=======================================
I am trying to change the background color of input type date when calender is open but unable to figure out the way. here is the code
dateInputRoot: {
'&:hover': {
backgroundColor: '#EBEBEB',
},
'&:active': {
backgroundColor: '#fff',
borderColor: '#2EFF22',
borderWidth: 1,
},
},
dateInput: {
border: 0,
},
<TextField
margin="dense"
type="date"
variant="outlined"
value={closeDate}
placeholder=""
fullWidth
style={{ paddingLeft: 0 }}
onChange={(e) => {
setCloseDate(e.target.value);
}}
className={classes.dateInputRoot}
InputProps={{
classes: { notchedOutline: classes.dateInput },
}}
/>
Problem is with active selector it changes the background only until I press the mouse button also no borderWidth is applying. i want to give background to white and some border when calendar is open.
Any help please
Related
I was trying to change the hover effect of mui Auto Complete component options [inside the drop down]. But it seems I can not find the proper method to do so.
This is the hover effect I am trying to change : Image
I want to put my own color choice.
This is my code [sorry I am new to react. pretty bad codes] .
I tried many solution from stack overflow and other websites. They did not work for me [may be because I did not understand what they were saying].
I just want to change the hover effect color, when the mouse hovers over the options inside the select componenet. But I can not figure out how to do it.
This is my component Image
export default function SelectBox ( { ...props } ) {
return (
<Autocomplete
autoComplete={ true }
disablePortal
id="combo-box-demo"
options={ props.options }
ChipProps={ { backgroundColor: "green" } } // I have no idea what this does
sx={ {
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// no idea what this does too
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']" :
{
backgroundColor: "#FF8787",
},
} }
renderInput={ ( params ) => <TextField { ...params } label={ props.label } size='small' className='color-change'
sx={ {
width: "80%", backgroundColor: "#F1F1F1",
'.MuiOutlinedInput-notchedOutline': {
borderColor: '#C6DECD',
}, borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
}, "&:hover": {
"&& fieldset": {
border: "1px solid green"
}
}
} } /> }
/>
);
}
Assuming that the goal is to customize the background color of options when being hovered, it seems that posted code just need to add :hover to a selector for the sx prop of Autocomplete.
Simplified example tested here: stackblitz
Change the following selector:
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']": {
backgroundColor: "#FF8787",
};
To add :hover so that it selects the hovered:
// 👇 Select the hover item here
'& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover': {
// 👇 Customize the hover bg color here
backgroundColor: "#FF8787",
};
Full example for Autocomplete, the original selector is kept in here so it customizes the selected item to match the hover effect, but this an optional approach.
export default function SelectBox(props) {
return (
<Autocomplete
autoComplete={true}
disablePortal
id="combo-box-demo"
options={props.options}
ChipProps={{ backgroundColor: "green" }}
sx={{
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// 👇 Select the hover item here
"& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover": {
// 👇 Customize the hover bg color here
backgroundColor: "hotpink",
},
// 👇 Optional: keep this one to customize the selected item when hovered
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']:hover":
{
backgroundColor: "hotpink",
},
}}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
size="small"
className="color-change"
sx={{
width: "80%",
backgroundColor: "#F1F1F1",
".MuiOutlinedInput-notchedOutline": {
borderColor: "#C6DECD",
},
borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green",
},
"&:hover": {
"&& fieldset": {
border: "1px solid green",
},
},
}}
/>
)}
/>
);
}
Hello I tried implementing Material UI Autocomplete component to use it as a search input. I used styled function from "#mui/material/styles" and added some custom CSS but when the page first loads you can see the CSS code instead of the actual component for a split second before appearing. Here is a screenshot of the problem:
The source code appears for a split second on the first load of the page before the Autocomplete component appears
Here is the Autocomplete component:
<Autocomplete
value={undefined || autoValue}
freeSolo
id="autocomplete"
autoHighlight={true}
autoSelect={true}
autoComplete={true}
open={open}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
disableClearable
// className="w-full"
fullWidth
options={items.map((item: string) => ({
url: item,
title: makeTitle(item),
}))}
getOptionLabel={(option: any) => option.title || ""}
renderOption={(props, option: Item) => {
return (
<li
key={option.url}
className=" hover:bg-slate-200 "
onClick={handleOptionClick}
>
<Link
href={`/calculators/${option.url}`}
className="block p-4 w-full"
>
{makeTitle(option.title)}
</Link>
</li>
);
}}
renderInput={(params) => (
<SearchTextField
{...params}
ref={textInput}
// onChange={(e) => console.log(e.target.value)}
// value="Hello"
variant="outlined"
// onChange={handleChange}
InputProps={{
...params.InputProps,
type: "search",
startAdornment: (
<InputAdornment position="start">
<SearchIcon style={{ color: "white" }} />
</InputAdornment>
),
}}
/>
)}
/>
And here is the CSS:
const SearchTextField = styled(TextField)({
"& .MuiInputBase-root": {
backgroundColor: "rgb(40,80,170)",
"&:hover": {
backgroundColor: "rgb(36,69,159)",
},
"&.Mui-focused": {
backgroundColor: "rgb(36,69,159)",
},
},
// "& .MuiAutocomplete-input": {
// paddingLeft: "10px !important",
// },
"& .MuiInputBase-input": {
backgroundColor: "white",
borderRadius: `90px`,
paddingLeft: "16px !important",
},
"& label.Mui-focused": {
color: "white",
},
"& .MuiInput-underline:after": {
borderBottomColor: "white",
},
"& .MuiOutlinedInput-root": {
borderRadius: `90px`,
"& fieldset": {
borderStyle: "none",
borderRadius: `90px`,
paddingRight: "10px",
},
"&:hover fieldset": {
borderStyle: "none",
borderColor: "white",
},
"&.Mui-focused fieldset": {
borderStyle: "none",
borderColor: "white",
},
},
});
I've never seen CSS source code rendering on the browser tried looking in Material UI forums but could not find anything. It does not look to happen in mobile browsers only desktop.
I am using Material-UI version 4 and not the latest mui v5.
I have tried the following to no avail. I just want to remove/hide the border around the textfield component.
<TextField
disabled={true}
variant="standard"
InputProps={{
style: { backgroundColor: '#d6eaf8', fontSize: '18px', color: 'black' },
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
}}
/>
If you only want to remove the material ui underline border you simply use the "disableUnderline: 'true'" property like this:
<TextField
disabled={true}
variant="standard"
InputProps={{
disableUnderline: 'true',
style: {
backgroundColor: "#d6eaf8",
fontSize: "18px",
color: "black"
}
}}
/>
If you want to have all the TextInputs look the same I would recommend setting up a custom Theme, though.
updated:
Another way of removing the border is to fiddle around with the CSS Global classes such as:
const StyledTextField = withStyles({
root: {
"& .MuiOutlinedInput-root": {
backgroundColor: "lightblue",
"& fieldset": {
border: "none"
}
}
}
})(TextField);
return <StyledTextField variant="outlined" />;
updated 2:
or if you rather use a custom theme:
const theme = createTheme({});
theme.overrides = {
MuiOutlinedInput: {
root: {
backgroundColor: 'lightblue',
},
notchedOutline: {
border: "none"
}
}
};
...
<ThemeProvider theme={theme}>
<TextField variant="outlined" />
</ThemeProvider>
I can't figure out how my InputAdornment is getting improperly placed.
I can't see anything in my styles that would influence the position of the icon within the TextField (e.g. padding, flex stuff).
How it currently looks - calendar does not sit on the line/within text field input
How I would like it to look - but of course with a calendar icon and not a 'kg' :)
My styles object (with some ... used for brevity)
const useStyles = makeStyles(theme => ({
input: {
'& input, textarea': {
paddingTop: 8,
paddingBottom: 12,
fontSize: 15,
marginTop: 15,
'&:focus': {
borderBottomColor: COLORS.BLACK
},
'&::placeholder': {
fontSize: 15
}
},
},
...
dashboardInput: {
'& .MuiInputLabel-root': {
color: theme.palette.text.primary,
fontSize: 16,
},
'& input, textarea': {
borderBottom: `1px solid ${COLORS.BLACK}`,
fontSize: 16,
'&::placeholder': {
color: theme.palette.grey[400],
},
'&:disabled': {
color: COLORS.BLACK
}
},
'& .MuiFormHelperText-root': {
color: theme.palette.grey[500],
fontSize: 10
},
},
...
inputLimiter: {
textAlign: 'right',
fontSize: 10
},
...
},
}));
The relevant guts of the component:
<FormControl
fullWidth
className={classNames(classes.input, getInputStyle(appearance), {
[classes.error]: error
})}
>
<InputLabel shrink htmlFor={name}>
<div className={classes.divcontrol}><div>{label}</div><div className={classes.redAsterisk}>*</div></div>
</InputLabel>
<TextField
id={name}
placeholder={placeholder}
fullWidth
multiline={multiline}
rows={multiline ? rows : 0}
type={type}
style={style}
inputProps={{
maxLength,
}}
defaultValue={defaultValue}
disabled={disabled}
onChange={e => onChangeWithRightType(e)}
InputLabelProps={{
shrink: true,
}}
value={value}
{...props}
InputProps={{
disableUnderline: true,
endAdornment: (
<InputAdornment position="end">
<DateRange />
</InputAdornment>
),
}}
error
helperText={helperText}
/>
{maxLength && (
<Typography variant="body2" className={classes.inputLimiter}>
{value ? String(value).length : 0}/{maxLength}
</Typography>
)}
</FormControl>
About your question, I think you should set disableUnderline in InputProps to false.
InputProps={{
disableUnderline: false,
......
}}
A few issues with my visualization:
The text on my first button appears on the right end of the button, even though I have aligned it to the center. How can I shift the text 'login' to the center?
Currently, the 'Sign Up Here' text appears in the mid of the screen. I want it towards the end. However, when I increase the value for marginTop, the text disappears. For instance if I change it to 20, I can see only half of it (in the middle of the screen). If I increase it further it just disappears.
The Forgot Password text also appears on the left side even though I have aligned it.
The title 'My App' does not appear at all.
How can I fix these minor issues?
<Container View style={styles.container}>
<Text View style={styles.title}>
Instaride</Text>
<View style={{flex:1}}></View>
<Form View style={styles.formInput}>
<Item floatingLabel>
<Label View style={styles.labelText}>Username</Label>
<Input
View style={styles.textInput}
onChangeText={(textUname) => uname(textUname)}
value={textUname}
placeholder={'Username'}
/>
</Item>
<Item floatingLabel >
<Label View style={styles.labelText}>Password</Label>
<Input
View style={styles.textInput}
onChangeText={(textPassword) => password(textPassword)}
value={textPassword}
placeholder={'Password'}
secureTextEntry={true}
/>
</Item>
</Form>
<Button View style={styles.button}
onPress={() => navigation.navigate("Details")}>
<Text>Login</Text>
</Button>
<Text View style={styles.forgotText}>
Forgot Password?</Text>
<Right>
<Button hasText transparent onPress={() => navigation.navigate('Registration')}>
<Text View style={styles.signupText}>
Don't have an account? Sign Up Here</Text>
</Button>
</Right>
</Container>
);
}
);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#242625',
paddingTop: getStatusBarHeight(),
},
title: {
textAlign: 'center',
fontSize: 22,
color: 'white',
},
textInput: {
color: 'white',
},
button: {
marginTop: 15,
backgroundColor: '#65c756',
width: '70%',
height: '6%',
justifyContent: 'center',
alignSelf: 'center'
},
forgotText: {
marginTop: 15,
justifyContent: 'center',
textAlign: 'center',
color: 'white',
},
signupText: {
marginTop: 16,
justifyContent: 'center',
color: 'white',
},
labelText: {
fontSize : 14,
},
formInput: {
borderBottomWidth: 1,
marginLeft: 20,
marginRight: 20,
marginTop: 40,
},
});
UPDATE:
You don't need to use Input View, as that's not the right way.
The below code works and you can check in the Expo demo, you need to add full in the Button.
Answers to the points:
You don't need Left/Right, you can simply put it in View, Left was causing the issue.
Use flex:1 on the Middle Part, so it will grow and occupy the screen and will push your Sign Up here at the bottom
Forget password is pushed to the center
We used getStatusBarHeight and have padding equal to the statusBarHeight
import * as React from "react";
import {
Text,
View,
StyleSheet,
Container,
Form,
Item,
Label,
Input,
Left,
Right,
Button,
Content
} from "native-base";
import { SafeAreaView } from "react-native";
import Constants from "expo-constants";
import { getStatusBarHeight } from "react-native-status-bar-height";
// You can import from local files
import AssetExample from "./components/AssetExample";
// or any pure javascript modules available in npm
import { Card } from "react-native-paper";
export default class App extends React.Component {
render() {
return (
<Container
View
style={Object.assign(
{ ...styles.container },
{ marginTop: getStatusBarHeight() }
)}
>
<Content contentContainerStyle={{ flex: 1 }}>
<View>
<Text style={styles.title}>Instaride</Text>
</View>
<View style={{ flex: 1 }}>
<Form style={Object.assign({ ...styles.formInput }, { flex: 1 })}>
<Item floatingLabel>
<Label style={styles.labelText}>Username</Label>
<Input style={styles.textInput} placeholder={"Username"} />
</Item>
<Item floatingLabel>
<Label style={styles.labelText}>Password</Label>
<Input
View
style={styles.textInput}
placeholder={"Password"}
secureTextEntry={true}
/>
</Item>
<Button
full
style={styles.button}
onPress={() => navigation.navigate("Details")}
>
<Text>Login</Text>
</Button>
</Form>
</View>
<View>
<Text View style={styles.forgotText}>
Forgot Password?
</Text>
<Button
hasText
transparent
onPress={() => navigation.navigate("Registration")}
style={{ justifyContent: "center" }}
>
<Text style={styles.signupText}>
Don't have an account? Sign Up Here
</Text>
</Button>
</View>
</Content>
</Container>
);
}
}
const styles = {
container: {
flex: 1,
backgroundColor: "#242625",
borderWidth: 2,
borderColor: "red"
},
title: {
textAlign: "center",
fontSize: 22,
color: "white"
},
textInput: {
color: "white"
},
button: {
marginTop: 15,
backgroundColor: "#65c756"
},
forgotText: {
marginTop: 15,
justifyContent: "center",
textAlign: "center",
color: "white"
},
signupText: {
textAlign: "center",
justifyContent: "center",
color: "white"
},
labelText: {
fontSize: 14
},
formInput: {
borderBottomWidth: 1,
marginLeft: 20,
marginRight: 20
}
};
Temporary Link to Expo: https://snack.expo.io/#dhavaljardosh/8af9d3