如何在React中更改字体颜色，字体大小和按钮颜色

Question

当我尝试更改价格颜色，按钮颜色和标题字体样式时，但它不起作用。它没有改变任何东西。以及如何创建阴影

index.js  index.js

panel.js Line 11 and line 22, try to change the price color

Botton.js Line 20 and lines 5-7, try to change the button color

Button.css button.css

Answer 1

你写内联风格......

openConfirmDialog() { this.modalRef = this.modalService.show(ConfirmationComponent); return this.modalRef.content.onClose; }

或

<Panel style={{color:'red'}}>

在你的style.css文件中

只需使用

<Panel className="sample"> 

或者

.sample { your style here.... }

然后在

中写下你的风格

<Panel className={styles.sample}>

Answer 2

function binaryAgent(str) { var codedStr = str.split(" ").map(Number), decodedStr = ""; // console.log(codedStr) for (var i = 0; i < codedStr.length; i++) { // binaryCode.push(String.fromCharCode(parseInt(newBinary[i], 2))); decodedStr += (String.fromCharCode(parseInt(codedStr[i], 2))); } return decodedStr; } console.log(binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111"))属性在HTML5中不起作用。您应该使用color或将内容包装在style="color: red;"。

<font color="red">

或

<p style={"color: " + color}>
  Blah blah blah
</p>

对于按钮，您的<p> <font color={color}> Blah blah blah </font> </p> 为backgroundColor。我猜它应该是bule？

由于您的按钮上没有blue课程且您的段落上没有backgroundColor课程，因此您的CSS文件也不会被应用。

Answer 3

请记住，你在编写JSX而不是HTML。对于内联样式，必须执行p元素

在panel.js的第22行，

<p className = "Autoprice" style = {{color:color}}>{price}</p>

On Botton.js

第6行

const styles = { color:'blue', background-color:'blue' }