How to target fieldset of input?

[jimmiejackson414-zz]

Hi there, me again.

Apologies for my ignorance... I'm having a bit of trouble figuring out how to target the fieldset inside of the input style. For me, it has a "NotchedOutline" class.

More specifically, I need to alter the blue border when the input has focus.

My code is as follows: const Geocoder = withStyles({ container: { backgroundColor: 'inherit', marginTop: '16px', }, })(MatGeocoder);

const styles = { input: { '&$cssFocused $notchedOutline': { backgroundColor: 'green' } }, textField: { // backgroundColor: 'blue', } };

<Geocoder inputPlaceholder='City, State' accessToken={MAPBOX_TOKEN} onSelect={result => this._handleChange} showLoader={true} inputPaperProps={{ square: true }} suggestionsPaperProps={{ square: true, }} inputTextFieldProps={{ variant: 'outlined', fullWidth: true, classes: { root: classes.textField } }} inputClasses={{ root: classes.input }} showInputContainer={false} {...geocoderOptions} > </Geocoder>

Thanks for your help!

[wheredoesyourmindgo]

Just getting to this. I'll get back real soon.

[wheredoesyourmindgo]

Yes, that is a bit cryptic.

Try:

const styles = {
    input: {
        borderRadius: 4,
        '&$cssFocused $notchedOutline': {
            borderColor: 'green'
        }
    },
    notchedOutline: {},
    cssFocused: {},
    textField: {
        // backgroundColor: 'blue',
    }
};

and

inputClasses={{
    root: classes.input,
    notchedOutline: classes.notchedOutline,
    focused: classes.cssFocused
}}           

See this Material-UI Issue for more info regarding the complexity surrounding the targeting/styling this component.

[jimmiejackson414-zz]

Ah I see! In my normal TextField's those classes would've been applied to InputLabelProps and InputProps. So now i've been able to fix it with something like this: inputClasses={{ root: classes.cssOutlinedInput, focused: classes.cssFocused, notchedOutline: classes.notchedOutline, }}

Thanks for the help!