Ссылка на глобальный класс компонентов в локальном стиле JSS? - PullRequest
Новая
       8

Ссылка на глобальный класс компонентов в локальном стиле JSS?

0 голосов
/ 26 мая 2018

Я использую Material-UI с React, и то, что я хочу сделать, стиль стандартного компонента Material-UI, когда он появляется в локальном классе.Концептуально, что-то вроде: 

const styles = {
  localClass: {
    '& MuiGrid-item': {
      backgroundColor: 'red'
    }
  }
}

В JSS я вижу, как ссылаться на локальные классы с помощью нотации $, и как переопределить / дополнить стиль материала-пользовательского интерфейса с помощью createTheme, но я не смогнайти что-нибудь о том, как выполнить этот вариант использования.

Ответы [ 3 ]

0 голосов
/ 16 октября 2018

После продолжения работы над этим, кажется, что ответ «все работает иначе», поэтому стиль, который был бы элегантен в CSS + HTML, может быть неудобным или совершенно невозможным в CSS + JS.Мне действительно кажется, что модель CSS + JS в некоторых случаях выливает ребенка из воды, но сейчас так оно и есть.

Тем не менее, во многих случаях, когда вы хотите использовать компонент модификацииСтилизация, основанная на контексте (= наличие родительских компонентов или включающих в себя классы стилей), может быть разумно выполнена другими средствами, но она немного зависит от конкретного варианта использования.

В случаях, когда целью является изменениеповедение определенного компонента, просто поместите компонент в новый класс напрямую.Например: 

const style = { root: { backgroundColor: 'red' } } 

StyledWidget = withStyle(style, 'StyledWidget')(
  () => <Widget classes={{ root: classes.root }} />

Там, где вы хотите сделать что-то повторно используемым (по крайней мере, на уровне кода), создать виджет стиля, который принимает компонент рендеринга, или создать компонент более высокого порядка, который внедряет классы стилей.Например: 

<WidgetStyler component={TextInput} ... />
<WidgetStyler component={Buttton} />

или 

StyledWidget = withWidgetStyling(TextInput)
0 голосов
/ 20 февраля 2019

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

    <ListItem
      className={classes.navLink}
      component={Link}
      activeClassName="active"
      to={`/graphiql`}
      button
    >
      <ListItemText
        classes={{ primary: "navLink-text" }}
        primary="GraphiQL"
      />
    </ListItem>

Это представление навигационной ссылки внутри адаптивного навигационного ящика с именем NavDrawer.При такой настройке ListItem - сгенерированный <a /> - получает className active, когда Link активен.

NavDrawer может получить реквизит navItems, содержащий похожие навигационные ссылки.Таким образом, чтобы нацелить и стилизовать эти active навигационные ссылки по всему миру, я добавил следующее к NavDrawer withStyles`: 

const styles = theme => ({
  "@global": {
    ".active .navLink-text": {
      color: theme.palette.primary.main,
      fontWeight: 500,
      letterSpacing: "0.1em"
    }
  },
  root: {
    display: "flex"
  },
  // other rules here
}

При этом, независимо от того, куда пришли навигационные ссылкиИсходя из этого, они получают соответствующие активные стили при визуализации внутри NavDrawer.

. Код для NavDrawer, по сути, является копией вставки адаптивного блока навигации из документов Material UI.

0 голосов
/ 27 мая 2018

У вас есть 4 способа настройки стилей MUI https://material -ui.com / customization / overrides /

...