Как нацелить братьев и сестер / детей сложного компонента в Material UI / JSS

Question

Я использую Material UI в настоящее время в моем проекте. Это работает хорошо, но я не могу понять, как стилизовать дочерние и родные компоненты с помощью JSS.

Например, компонент Material UI отображает что-то вроде этого:

<div class="MuiFormControl-root-36 MuiFormControl-marginNormal-37">
   <label class="MuiFormLabel-root-45 MuiInputLabel-root-40 MuiInputLabel-formControl-41 MuiInputLabel-animated-44 MuiInputLabel-shrink-43" data-shrink="true">Field label</label>
   <div class="MuiInput-root-52 MuiInput- 
        formControl-53"><input aria-invalid="false" class="MuiInput-input-60" 
        name="fieldname" type="text" value=""></div>
</div>

Из документации UI Я знаю, что это просто оболочка для некоторых компонентов более низкого уровня. Я могу настроить таргетинг на эти отдельные компоненты, используя createMuiTheme(), например:

MuiInput: {
        formControl: {
            'label + &': {
                marginTop: '30px'
            }
        },
        root: {
            '&$focused': {
                boxShadow: '0px 3px 8px rgba(108, 108, 108, 0.16)'
            },
            borderRadius: '40px',
            padding: '7px 16px',
            background: 'white',
            transition: 'box-shadow 0.2s',
        }
    }

Что я не понимаю, так это как нацелить дочерние элементы и / или братьев и сестер в этих компонентах - например, в моей функции createMuiTheme, как я могу нацелить компонент MuiFormLabel, который находится внутри компонента MuiFormControl? Или, как я могу нацелить компонент MuiInput, если компонент MuiFormLabel имеет определенный класс? Я знаю, что могу нацелиться на элемент , используя обычный CSS (например, «& label»), но я не знаю, как нацелить компонент / класс, поскольку имена классов являются динамическими.

Answer 1

Вы можете обернуть каждый компонент в свой собственный withStyles HOC и стилизовать их напрямую. Сохранение стилей на уровне компонентов, а не попытка стилизовать вложенные компоненты от их родительского элемента.

const styles = createStyles({
    root: {
        padding: 0
    },
    childRoot: {
        color: 'red'
    }
});

class MyComponent extends React.Component {
    
    render() {
        const { classes } = this.props;
        
        return (
            <ul className={classes.root}>
                <fooComponent>
                    Bar
                </fooComponent>
            </ul>
        );    
    }
}

const fooComponent = withStyles(styles)((props) => {

    return (
        <li className={classes.childRoot}>
            { props.children }
        </li>
    );
});

export default withStyles(styles)(MyComponent);

Обновление:

В качестве альтернативы, если вы хотите использовать несколько компонентов в одном файле, вы можете заключить их в свои собственные HOC.

const renderFoo = withStyles(styles)((props) => {
  const { bar, classes } = props;
  
  return (
    <div classNames={classes[bar]}>
      Baz
    </div>
  )

}

const MyComponent = (props) => {
  return (
    <div>
      <renderFoo variant='bar' />
    </div>
}

export default MyComponent

Answer 2

Вы можете напрямую стилизовать компонент MuiFormLabel, зачем вам его стилизовать поверх MuiFormControl?