Я в настоящее время реализую меню в 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.