@ material-ui / styles (4.0.0-beta.1) проблема с механизмом withStyle - PullRequest
2 голосов
/ 06 мая 2019

Я в настоящее время реализую меню в ReactJ, используя Material-Ui. Я настраиваю так, чтобы пришлось менять отступы в CSS, используя подход «CSS в JS». Однако стили не всегда применяются. Глядя на сгенерированные теги, кажется, что мой стиль переопределяется 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 solid yellow», но вместо этого установлен стиль по умолчанию из MuiBaseButton.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...