ESlint naming-convention X tss-react

[zbouslikhin]

Hello,

When running ESlint, nested selectors are flagged as problematic. Is there any way to get around that?

[garronej]

Hi @zbouslikhin,

1. You can ignore this rule.
   In the package.json if you are in a create-react-app
   
   Or in .eslintconfig.
2. I sugest avoiding to target inner MUI components like this. It's not type safe.
   You can use the classes prop instead:

export function SwitchLabels() {

    const { classes, css } = useStyles();

    return (

        <FormGroup>
            <FormControlLabel
                control={
                <Switch 
                    classes={{
                        switchBase: css({ border: "1px solid black" }),
                        thumb: classes.muiSwitchThumb
                    }}
                />
            }
                label="My Switch"
            />
        </FormGroup>
    );
}

PS: Unrelated but it's usefull, you can checkout the eslint plugin for TSS that detects unused classes: https://docs.tss-react.dev/detecting-unused-classes

Hopes it helps.