3

我目前在我的项目中使用 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 文档中，我知道这只是一些较低级别组件的包装器。我可以像这样使用这些单独的组件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'）来定位元素，但我不知道如何定位组件/类，因为类名是动态的。

4

2 回答 2

0

您可以直接设置 MuiFormLabel 组件的样式，为什么需要在 MuiFormControl 上设置它的样式？

于 2018-08-30T10:16:55.627 回答
0

您可以将每个组件包装在其自己的withStylesHOC 中并直接设置它们的样式。将样式保持在组件级别，而不是尝试从其父级设置嵌套组件的样式。

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

于 2018-11-02T20:40:44.697 回答