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>

从Material UI documentation中我知道，这只是一些较低级别组件的包装。我可以像这样使用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函数中，如何定位MuiFormControl组件内部的MuiFormLabel组件？或者，如果MuiFormLabel组件具有某个类，如何定位MuiInput组件？我知道我可以使用普通CSS（例如'＆label'）来定位 element ，但是由于类名是动态的，所以我不知道如何定位组件/类。

Answer 1

您可以直接设置MuiFormLabel组件的样式，为什么需要通过MuiFormControl对其进行样式设置？

Answer 2

您可以将每个组件包装在其自己的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

如何在Material UI / JSS中定位复杂组件的同级/子级

2 个答案: