Question

目前是使用Material-Ui在ReactJs中实现的菜单。我正在自定义，因此必须使用“ JS中的CSS”方法更改CSS中的填充。但是，样式并不总是适用。查看生成的标签，似乎我的样式被MuiBaseButton覆盖了，它的css规则优先于我的（我猜这应该不会发生，因为JSS插件应该呈现我的最后一个，所以它应该更具体。请看一下页面并且实际上就像material-ui多次渲染了MuiBaseButton一样（在我自己的React组件的样式前后使用'withStyle'方法，因此它永远没有机会拥有'navItemStyles'

import * as _ from 'lodash';
import * as React from 'react';
import classNames from 'classnames';

import ListItem from '@material-ui/core/ListItem';
import Tooltip from '@material-ui/core/Tooltip';
import withStyles from '@material-ui/core/styles/withStyles';
import { Theme, WithStyles } from '@material-ui/core';
import { UxUseCase } from '../../UxTypes';

[...]

export const navItemStyles = (theme: Theme) => ({
[...]
    bananaman: {
        border: '3px solid yellow'
    },
});

[...]
class UxSidebarNavItem extends React.Component<UxSidebarNavItemProperties & WithStyles<any>> {
[...]
public render(): React.ReactNode {
[...]
        const listClass = classNames(classes.bananaman);

       return (
            <Tooltip title={item.label}>
                <ListItem
                    ContainerComponent="a"
                    button
                    key={item.id}
                    className={listClass}
                    href={item.useCase ? item.useCase.bookmark : ''}
                    onClick={this.handleOnClick}
                >
                    HAHA
                    <span className={itemClass}>{item.label}</span>
                </ListItem>
            </Tooltip>
        );
[...]
export default withStyles(navItemStyles)(UxSidebarNavItem);

在这里，我希望设置边框：“ 3px纯黄色”，但改为设置MuiBaseButton的默认样式。

使用withwith机制的@ material-ui / styles（4.0.0-beta.1）问题

0 个答案: