Блог

Главная - Вопросы по программированию - Как выбрать идентификатор в material-ui styles / JSS?

Как выбрать идентификатор в material-ui styles / JSS?

#reactjs #material-ui #frontend #styling #jss

#reactjs #материал-пользовательский интерфейс #интерфейс #стиль #jss

Вопрос:

Я пишу приложение React и использую @material-ui/styles, основанное на JSS. Я создаю стиль с использованием API компонентов более высокого порядка. Как мне указать элемент через его идентификатор в моих стилях? Я искал как в материалах UI, так и в документах JSS, но не смог найти никакой информации об этом. Что-то вроде:

 const styles = (theme) => {
  className:{
    propertyName:"something something"
  },
  #elementId:{
    propertyName:"something something"
  }
}

Ответ №1:

Один из способов добавить css к идентификатору элемента — это обернуть его родительским div (или любым другим элементом) и предоставить CSS родительскому элементу и вложить дочерний CSS

 const styles = (theme) => {
  parentDiv:{
      "amp; #childId": {
          propertyName: "something something"
      }
  },
}

// Inside the render method

<div className={styles.parentDiv}>
    <div id="childId" />
</div>

Комментарии:

1. Спасибо! Это единственный способ?

2. Если вы собираетесь использовать withStyles HOC, то, согласно документам, «он просто объединяет имена классов, предоставленные в таблице стилей». Поэтому я предполагаю, что он добавит только имена классов, а не css для идентификатора элемента

3. Понятно, большое вам спасибо! Abit раздражен тем, что нет прямого способа выбрать идентификатор, но я буду работать с предоставленным вами решением.