Есть ли способ сделать относительную (в процентах или rem) высоту строки в styleled-компонентах?

Question

Стилизованные компоненты утверждают, что охватывают все CSS, но я столкнулся с этой простой, но важной проблемой. Мне нужно увеличить высоту строки, но относительным образом, иначе линия обрезается (ее высота меньше букв).

Когда я пытаюсь использовать rem или% как единицу, я получаю сообщение об ошибке, в котором говорится, что вместо строки ожидается тип числа.

Answer 1

line-height: 100% означает 100% размера шрифта для этого элемента, а не 100% его высоты. На самом деле высота строки всегда зависит от размера шрифта, а не от высоты, если только ее значение не использует единицу абсолютной длины (px, pt и т. Д.). Другой вариант, который вы можете попробовать, это использование таблицы клеток

#wrapper{
  height: 40px;
  width:200px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background: red;
}