Material-UI и TypeScript: как использовать! важно? - PullRequest
Новая
       17

Material-UI и TypeScript: как использовать! важно?

0 голосов
/ 05 ноября 2018

Я создаю приложение React и использую material-ui для своих компонентов. Интересно, как я могу дать !important свойство стилю?

Я пробовал это: 

<Paper className="left"...>

Я использую withStyles и WithStyles. Тогда по моему styles.ts: 

left: {
  display: "block",
  float: "left!important",
},

Но это выдает ошибку: 

[ts] Type '"left!important"' is not assignable to type '"right" | "none" | "left" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "inline-end" | "inline-start" | undefined'.
index.d.ts(1266, 3): The expected type comes from property 'float' which is declared here on type 'CSSProperties'
(property) StandardLonghandProperties<TLength = string | 0>.float?: "right" | "none" | "left" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "inline-end" | "inline-start" | undefined

Как назначить флаг !important при использовании material-ui с TypeScript?

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Вы можете просто разыграть его. Например: 

left: {
  display: "block",
  float: "left!important" as any,
},

или 

left: {
  display: "block",
  float: "left!important" as "left",
},

Вот пример детской площадки .

0 голосов
/ 05 ноября 2018

Есть несколько способов переопределить компонент MUI. Простейшим и понятным является применение стиля на самом компоненте. встроенный стиль весит больше специфичности, чем предоставленный CSS. Вы бы использовали это так: 

<Paper style={{display: 'block'}}...>

Если вы хотите использовать обычный CSS: 

import './style.css'

и укажите класс для компонента 

<Paper className="left"...>

Таким образом, вы сможете использовать обычный CSS, как 

left: {
  display: "block",
  float: "left!important",
},

Я действительно рекомендую подумать о специфике и о том, чего достичь с вашими стилями, прежде чем применять их, в противном случае вы начнете борьбу со стилями MUI, и это может стать довольно неприятным. Надеюсь, это поможет, счастливое кодирование; -)

...