there is that annoying black outline that appears in my material Ui autocomplete component on hover and I cannot even find in the css to remove it. I feel like I've tried everything. Does somebody have an idea about it? It just doesn't match the style of my project and the whole page looks bad because of it.
You can override the input component using "renderInput". This will allow you to provide a custom input component that does not have the hover effect.
Docs: https://mui.com/material-ui/react-autocomplete/#custom-input
<Autocomplete
sx={{
display: 'inline-block',
'& input': {
width: 200,
bgcolor: 'background.paper',
color: (theme) =>
theme.palette.getContrastText(theme.palette.background.paper),
},
}}
id="custom-input-demo"
options={options}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
I struggled a lot to remove the hover effect too. In my case could chaneg it using the .MuiInput-underline:hover:not(.Mui-disabled):before selector. I think in your case you could do something like
.MuiInput-underline:hover:not(.Mui-disabled):before {
border-bottom: 0 !important;
}
or something among those lines. Hope that helps.
Related
I'm using a very simple sample of the material ui Snackbar component, that renders the following HTML
<div class="MuiSnackbar-root-352 MuiSnackbar-anchorOriginBottomLeft-358">
<p class="MuiTypography-root-199 MuiTypography-body2-207 MuiPaper-root-121 MuiPaper-elevation6-129 MuiSnackbarContent-root-373" role="alertdialog" aria-describedby="message-id" direction="up" style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MuiSnackbarContent-message-374">
<span id="message-id">TunisiaNet created!</span>
</div>
</p>
</div>
for the following code
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={this.state.entityGroupAdded}
autoHideDuration={4000}
onClose={this.handleClose}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">{this.state.name} created!</span>}
/>
This naturally leads to an HTML specification incompatibility. The issue is that I don't know how to tell the Snackbar to create a div instead of a p element
I get the error:
0.chunk.js:101009 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
in div (created by SnackbarContent)
in p (created by Typography)
in Typography (created by WithStyles(Typography))
in WithStyles(Typography) (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by SnackbarContent)
in SnackbarContent (created by WithStyles(SnackbarContent))
Might wanna check your Material UI version or any override settings you might have made which includes typography components. I just tested a snackbar with the exact same code and the p tag (which uses typography, this part is causing the error) does not exist as a p tag but a different classname
<div class="MuiSnackbar-root-185 MuiSnackbar-anchorOriginBottomLeft-191">
<div class="MuiTypography-root-313 MuiTypography-body1-322 MuiPaper-root-20 MuiPaper-elevation6-28 MuiSnackbarContent-root-310" role="alertdialog" aria-describedby="message-id" style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MuiSnackbarContent-message-311">
<span id="message-id">Note archived</span></div>
</div>
For other who is looking for an answer other than something wrong with the overrides, most likely if nothing wrong with your overrides, and even before you check for that. Look into your code if it contain a component that inherit the props of Typography component like DialogContentText and you also have another Typography component or a component that will transfer to <p> tag in HTML as a child of that component.
In the the error above message props will become
<p class="MuiTypography-root-199 MuiTypography-body2-207 MuiPaper-root-121 MuiPaper-elevation6-129 MuiSnackbarContent-root-373" role="alertdialog" aria-describedby="message-id" direction="up" style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MuiSnackbarContent-message-374">
<span id="message-id">TunisiaNet created!</span>
</div>
</p>
I think this is not showing anymore in the new versions of material. But if you want to fix something like that take a look;
This will give errors
const someFunction= (): JSX.Element => {
return (
<DialogTitle>
Some title
</DialogTitle>
<DialogContentText>
<Typography variant='h5'>
Sometext
<Typography />
</DialogContentText>
<TextField
autoComplete='off'
margin='dense'
variant="outlined"
id='name'
label='email'
type='email'
fullWidth
/>
);
};
this will fix it
const someFunction= (): JSX.Element => {
return (
<DialogTitle>
Some title
</DialogTitle>
<DialogContentText variant='h5'>
Sometext
</DialogContentText>
<TextField
autoComplete='off'
margin='dense'
variant="outlined"
id='name'
label='email'
type='email'
fullWidth
/>
);
};
In this case for example you can use the normal props of Typography with DialogContentText.
Also you can user component='div' as prop of Typography, it could fix it, I didn't test
I'm using Material-UI. As it supports CSS styling with JSS, I'm struggling to access rule names in a different component. As you see the below codes, MyComponent uses AppBar component and I need to access rule names in AppBar component. However, for some reason I can't access the rule names in it.
MyComponent.js
<div id="navigation-pills">
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
...
>
...
</Tabs>
</AppBar>
</div>
</div>
styles.js
const styles = theme => ({
...
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper,
"& $flexContainer": {
display: "none"
}
},
...
});
JSS API says that I can access child rule names with $, but it doesn't work for some reason.
L
Like you see the below image, I would like to access flexContainer rule name on line 7.
It can only reference a rule from the same style sheet (styles object). In your code I can't tell, because you replaced it with "...".
Hi I want to style three buttons with different colors but When those buttons are disabled the custom style I've added at the beginning overrides the default style disabledTextColor, which adds a default fade and transparency value, so users can see that the button is disabled. How can style the disabled state or which should be the correct way to style the labelStyle and/or disabledTextColor? Here is an example
const style = {
labelStyle: {
color: 'red;
}
}
<FlatButton
label='Mit Linkedin anmelden'
labelPosition='after'
icon={<LinkedinIcon />}
onClick={() => Meteor.loginWithLinkedin()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
<div className='mdl-cell mdl-cell--12-col'>
<FlatButton
label='Mit Google anmelden'
labelPosition='after'
icon={<GoogleIcon />}
onClick={() => Meteor.loginWithGoogle()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
in this case the button always stays red even though the disabled state in True
You can create a little wrapper component around FlatButton that conditionally fades the labelStyle when the button is disabled.
const CustomFlatButton = (props) => (
<FlatButton
{...props}
labelStyle={{ ...props.labelStyle, opacity: props.disabled ? 0.3 : 1 }}
/>
);
...
<CustomFlatButton label="Disabled Red" style={{ color: 'red' }} disabled />
https://jsfiddle.net/6rads3tt/2/
Simply put, how can you change the border color of a Chosen jQuery select box? I am assuming you can do it with CSS but I can't quite figure out how.
$(".pnChosen").chosen({
search_contains: true
});
<select required class="pnChosen"></select>
I can use this to change the border color of all of them, but I only want to change ones that I mark as required.
.chosen-container{
border: 1px solid red;
}
And I also want to change the background color when they are disabled if that is possible.
You can use chosen's option inherit_select_classes.
Give required class on select element, and set css for this selector .required>chosen-single
$(".pnChosen").chosen({
search_contains: true,
inherit_select_classes: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<style>
.required>.chosen-single {
border: 1px solid #EE0000;
}
</style>
<select required class="pnChosen required">
<option>Option 1</option>
<option>Option 2</option>
</select>
Another option is to use the adjacent sibling combinator (+) selector in CSS to achieve the desired styling.
For example:
HTML
<select id="myselect" required="required">
...
</select>
<div id="myselect_chosen" class="chosen-container chosen-container-single">
<a class="chosen-single">
...
</a>
</div>
CSS
select:required + div.chosen-container a { ... }
This would apply the desired style(s) to your div.chosen-container a DOM element immediately following select:required. Just be aware that you may still have to establish CSS priority if you're attempting to override an existing Chosen style so your definitions can supersede any existing chosen styles.
Reference: Adjacent Sibling Combinator
Code:
#inputfield {
width:300px;
border: 2px solid #3f3f3f;
height:30px;
font-size:20px;
padding-left:5px;
color: #6f6f6f;
}
#inputname {
margin-right:10px;
font-size:20px;
color: #3f3f3f;
}
<a id="inputname>Name:</a><input name="name" id="inputfield" type="text">
<a id="inputname>Other Name:</a><input name="other" id="inputfield" type="text">
<a id="inputname>Other Other Name:</a><input name="other_2"
id="inputfield" type="text">
The names and the fields look out of place. I am trying to make the form organized like the way it looks on this page:
https://secure.hulu.com/signup
Things to change:
Don't use id. Use class and .inputfield
Make sure to set the display to inline-block so that the browser will honor the width
You don't want <a> tags. You want <label> tags.
Wrap each line of your form in its own <div> and use that to set the line height and spacing.