Блог

Главная - Вопросы по программированию - Реагировать — Условно применяя css в div, но это не работает

Реагировать — Условно применяя css в div, но это не работает

#css #reactjs #css-selectors #react-css-modules

Вопрос:

Посмотрел другие примеры и попытался сделать то же самое, но не уверен, почему мой код не работает. У меня есть код, который перебирает некоторые ключи и отображает div. Я хочу условно применить некоторые стили в зависимости от того, четный или нечетный ключ. Пример:

 <div className={parseInt(key) % 2 === 0  ? 'label1' : 'label2' }>
     <span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>

Стили доступны в одном файле и выглядят примерно так:

 # Material UI 
const useStyles = makeStyles((theme) => ({
  label1: {
    width: "50px",
    height: "16px",
    top: "458px",
    background: "yellow",
    fontSize: "12px",
  },
  label2: {
    width: "50px",
    height: "16px",
    top: "458px",
    background: "red",
    fontSize: "12px",
  }, 
}));

Что я делаю не так? В настоящее время ни один стиль не применяется к div

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

1. Соответственно ли переключаются классы в DOM ?

2. В настоящее время ни один стиль не применяется с приведенным выше кодом. код

3. <имя класса div={ parseInt(key) % 2 === 0 ? 'label1' : 'label2' }> ><span style={{ marginLeft: «10 пикселей» }}>{ключ}:00<span style={{ marginLeft: «10 пикселей» }}> </div> Можете ли вы попробовать это один раз. Добавьте тильду после { и закройте Тильду перед} в имени класса

Ответ №1:

Вам нужно использовать классы из useStyles крючка пользовательского интерфейса material.

 const classes = useStyles()

....

<div className={parseInt(key) % 2 === 0  ? classes.label1 : classes.label2 }>
     <span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>

Проверьте useStyles api-интерфейс hook: https://material-ui.com/styles/basics/

Если у вас есть компонент класса и вы можете использовать крючки, то вы можете сделать это с withStyles компонентом более высокого порядка, как в этом примере:

 import { withStyles } from "@material-ui/core/styles"

const styles = theme => ({
  label1: {
    backgroundColor: "red",
  },
  label2: {
    backgroundColor: "red",
  },
})

class ClassComponent extends Component {
  state = {
    searchNodes: "",
  }

  render() {
    const { classes } = this.props
    return (
      <div className={parseInt(key) % 2 === 0 ? classes.label1 : classes.label2}>
        <span style={{ marginLeft: "10px" }}>{key}:00</span>
      </div>
    )
  }
}

export default withStyles(styles, { withTheme: true })(ClassComponent)

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

1. Что делать, если это не функциональный компонент, а класс один

2. Это сработало !! Это было «» вокруг имени класса, которое было нарушителем. Спасибо вам за вашу помощь! @константин

3. Это была не просто строка, классы добавляются к объекту как свойство, поэтому вы получите имя класса, получив label1 реквизит из объекта, созданного useStyles или withStyles . Рад, что смог помочь!

4. Да, вы правы, забыл упомянуть, что раньше я пробовал что-то вроде «занятий». ярлык 1″, но это не сработало. Удаление «» сделало свое дело!

Метки: ,