Продвинутый стиль в материале UI - PullRequest
Новая
       19

Продвинутый стиль в материале UI

1 голос
/ 20 сентября 2019

Я начинаю изучать материал-интерфейс и создаю простое приложение в SandBox: https://codesandbox.io/s/eager-ride-cmkrc

Стиль jss для меня необычен, но если вы поможете мне с этими двумя простыми упражнениями, тогда япоймет все.

Во-первых: я хочу объединить общие свойства ButtonLeft и ButtonRight в новый класс и расширить его: (https://github.com/cssinjs/jss-extend#use-rule-name-from-the-current-styles-object)

ButtonControll: {
    display: "none",
    position: "absolute",
    fontSize: "24px"
},
ButtonLeft: {
    extend: 'ButtonControll',
    left: "0",
},
ButtonRight: {
    extend: 'ButtonControll',
    right: "0",
}

Но это не такwork = (

Второе: я хочу, чтобы стрелки появлялись при наведении курсора на контейнер, поэтому я написал следующее: 

"&:hover .MuiIconButton-root": {
    display: "block"
}

Проблема: MuiIconButton-root это базовый className для всех IconButtons? но я хочу что-то вроде этого: 

"&:hover ButtonLeft": {
    display: "block",
    backgroundColor: 'red' 
},
"&:hover ButtonRight": {
    display: "block",
    fontSize: '50px' 
}

Пожалуйста, помогите мне с этими двумя простыми задачами, и тогда я все пойму =)

1 Ответ

1 голос
/ 20 сентября 2019

jss-plugin-extend не включен по умолчанию в Material-UI.

Список включенных плагинов JSS можно найти здесь: https://material -ui.com / styles / advanced / # jss-plugins .

Вы можете следовать инструкциям по добавлению дополнительных плагинов, но вы также можете добиться того же эффекта другими способами.

Вы можете поместить общие свойства в объект:

const commonButton = {
  display: "none",
  position: "absolute",
  fontSize: "24px"
};
export default props => ({
  ButtonLeft: {
    ...commonButton,
    left: "0",
  },
  ButtonRight: {
    ...commonButton,
    right: "0",
  }
});

Или, поскольку у вас есть правило root, что кнопки находятся внутри, вы можете применить все распространенные стили с помощью вложенных правил в root: 

export default props => ({
  root: {
    width: "250px",
    height: "182px",
    alignItems: "center",
    justifyContent: "space-between",
    border: "1px solid black",
    position: "relative",
    "& $ButtonLeft, & $ButtonRight": {
      display: "none",
      position: "absolute",
      fontSize: "24px"
    },
    "&:hover $ButtonLeft, &:hover $ButtonRight": {
      display: "block"
    }
  },
  ButtonLeft: { left: "0" },
  ButtonRight: { right: "0" }
});

Edit jss-nested

В приведенном выше примере используется jss-plugin-nested, которое равно , включенному в Material-UI по умолчанию.Здесь также показан соответствующий синтаксис для ссылок hover.

Ответы по теме:

...