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

В настоящее время я использую 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 есть определенный класс? Я знаю, что могу настроить таргетинг на element с помощью обычного CSS (например, '& label'), но я не знаю, как настроить таргетинг на компонент / класс, поскольку имена классов являются динамическими.


reactjs material-ui jss
person Andrew Kilham    schedule 30.08.2018    source источник
comment
Не могли бы вы предоставить полный пример в codeandbox.io/s/new или подобном?   -  person Ricovitch    schedule 04.09.2018

Ответы (2)


arrow_upward
0
arrow_downward

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

person Oleg Isonen    schedule 30.08.2018
comment
Но как насчет таргетинга на братьев и сестер? Я знаю, что могу использовать '&' для нацеливания на текущий элемент, и я могу использовать обычные селекторы CSS для непосредственного нацеливания элементов, поскольку, поскольку имена классов генерируются автоматически, я не знаю, как на самом деле нацеливать определенные компоненты. Это возможно? - person Andrew Kilham; 03.09.2018
comment
@AndrewKilham Вы используете тот же синтаксис, просто ссылаясь на исходное имя (например, &:hover:not($button)). См. Мой вопрос: stackoverflow.com/q/55067108/200987 или этот stackoverflow.com/a/54057130/200987 - person oligofren; 09.03.2019

arrow_upward
0
arrow_downward

Вы можете обернуть каждый компонент в свой собственный 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

person kgstew    schedule 02.11.2018