променяйки размера на шрифта на бутоните за материали и използвайки скалата на бутоните? - javascript, css, реакции, материали-ui, jsx

Изглежда имам проблем с промяната на размера на шрифта на Material-UI (за React) RaisedButton и с това, че самият бутон правилно мащабира с него.

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

CSS:

.buttonText {
font-size: 63px;
}

Размерът на текста се променя, но самият бутон не се мащабира с него. Някой знае ли правилното решение на това? Искам да бутон да мащабирам с размера на текста.

Отговори:

6 за отговор № 1

Проблемът е, че материалът-интерфейс очертава всичкистилове за техните компоненти, така че ако се опитате да ги замените с CSS селектори, това обикновено не работи съвсем правилно. Вместо това, опитайте да отменяте каквито и да са стилове вградени, които не искате да използвате style свойство директно върху компонента. Ще изглежда така:

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

И ако все още не изглежда съвсем правилно, просто проверете всички генерирани стилове на вграждане в този компонент и вижте какво искате да промените, а след това просто добавете това към style обект.

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

---

10 за отговор № 2

Използвай labelSize опора за отмяна на стила на вградения елемент

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%

---