змінюючи розмір шрифту матеріалу-кнопки і маю кнопки масштабу? - javascript, css, реагує, матеріал-ui, jsx

Здається, у мене проблема зі зміною розміру шрифту на Material-UI (для React) RaisedButton і з правильною масштабуванням самої кнопки.

<RaisedButton
label={<span className="buttonText">Log in Here</span>}
/>

CSS:

.buttonText {
font-size: 63px;
}

Розмір тексту змінюється, але сама кнопка не масштабується з ним. Хтось знає правильне рішення цього питання? Я хочу, щоб кнопка була масштабована відповідно до розміру тексту.

Відповіді:

6 за відповідь № 1

Проблема полягає в тому, що в інтерфейсі Material-UI розміщено всістилі для їх компонентів, тому, якщо ви намагаєтеся їх замінити за допомогою селекторів CSS, це зазвичай не працює цілком правильно. Натомість спробуйте замінити будь-які вбудовані стилі, які ви не хочете використовувати style властивість безпосередньо на компонент. Це виглядало б приблизно так:

<RaisedButton style={{ fontSize: "63px" }} label="Log in Here" />

І якщо це все ще виглядає не зовсім правильно, просто огляньте всі згенеровані вбудовані стилі на цьому компоненті і подивіться, що ви хотіли б змінити, а потім просто додайте це до style об'єкт також.

http://www.material-ui.com/#/components/raised-button

---

10 за відповідь № 2

Використовувати labelSize prop, щоб замінити вбудований стиль для елемента

http://www.material-ui.com/#/components/raised-button

<RaisedButton
label="Button"
labelStyle={{ fontSize: "63px"}}
/>

---

4 для відповіді № 3

<RaisedButton
label="Label"
labelStyle={{ fontSize: 15 }}
/>

---

2 для відповіді № 4

Його потрібно додати з lineHeight як підказку стилю для рівного інтервалу:

  < RaisedButton style = {{lineHeight: "100px"}}
label = "lineHeight in style" / >

Ось скрипка з усіма різними рішеннями: https://jsfiddle.net/botbotdotdot/kfph5cc2/

Підбадьорює

---

0 для відповіді № 5

Використовуйте одиницю розміру шрифту як Percent (%) або em. Наприклад, font-size:12%

---