Как в пользовательском интерфейсе материала переопределить стиль компонента, выбранный селектором?

В пользовательском интерфейсе материала, чтобы увеличить расстояние между MuiInputLabel и MuiInput, мне нужно переопределить marginTop для label + .MuiInput-formControl.

Однако переопределение createMuiTheme обеспечивает только прямое переопределение CSS компонента Mui, например:

createMuiTheme({
  overrides: {
    MuiInput: {
      formControl: {
        marginTop: '1.5rem',
      },
    },
  }
})

Как я могу сделать что-то вроде:

createMuiTheme({
  overrides: {
    'label+MuiInput': {
      formControl: {
        marginTop: '1.5rem',
      },
    },
  }
})

Спасибо...


reactjs material-ui react-admin jss
person Arel Lin    schedule 16.02.2019    source источник

Ответы (1)


arrow_upward
14
arrow_downward

Вот соответствующая документация JSS:

https://cssinjs.org/jss-plugin-nested?v=v10.0.0-alpha.10#use--to-reference-selector-of-the-parent-rule

Вот необходимый вам синтаксис:

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      formControl: {
        "label + &": {
          marginTop: "1.5rem"
        }
      }
    }
  }
});

Вот рабочий пример:

Изменить 24v1wr9x0n

person Ryan Cogswell    schedule 16.02.2019