Блог

Я не могу понять, как сделать самую простую вещь в CSS, используя стили создания из материала-пользовательского интерфейса.

Представьте себе этот супер простой пример:

 <div classNames={clsx(wrapper, post.new amp;amp; classes.new)}>
  <p classNames={text}>Post</p>
  <p> Something else </p>
</div>
 

Стили тоже очень просты:

 const useStyles = makeStyles({
  wrapper: {
    // styles
  },
  text: {
    // styles
  },
  new: { 
    text: { 
      color: 'red', // this does not work, why? :[
    } 
  }
});
 

Вы, наверное, уже догадываетесь, в чем здесь проблема. Я хочу, чтобы у обертки new иногда был класс, и когда это происходит text , она становится красной. Это оно. Я совершенно не представляю, как это сделать.

Я знаю, что есть 'amp; .something' , но это выглядит как плохой подход, и я даже не знаю точного названия класса для текста, потому что классы-это тарабарщина ( makeStyles-text-somerandomnumber ). Я не хочу добавлять .новый класс ко всему, что нуждается в дополнительных стилях, что делать, если у меня есть несколько абзацев, которым нужны разные стили? Невозможно поддерживать. Наверное, я что-то упускаю, это так тривиально, но я понятия не имею, как это сделать!

Любая помощь будет высоко оценена!

 className={`wrapper ${this.state.something}`}
 

Я вижу , что ваш пост помечен reactjs , если вы используете React, вы можете просто динамически применять классы в любом их состоянии.

Не забудьте обратные ссылки для шаблонных литералов.