javascript 如何在 React 中更改字体颜色、字体大小和按钮颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50442745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change the font color, font size, and button color in React
提问by Peishi Long
when I try to change the price color, botton color and title font style, but it doesn't work. It didn't change anything. and how to create shadow
当我尝试更改价格颜色、底部颜色和标题字体样式时，但它不起作用。它没有改变任何东西。以及如何创建阴影
index.js index.js
index.js 索引.js
panel.js Line 11 and line 22, try to change the price color
panel.js 第11行和第22行，尝试改变价格颜色
Botton.js Line 20 and lines 5-7, try to change the button color
Botton.js 第20行和第5-7行，尝试改变按钮颜色
Button.css button.css
button.css button.css
回答by
You write inline style...
你写内联样式...
<Panel style={{color:'red'}}>
<Panel style={{color:'red'}}>
or
或者
<Panel className="sample">
in your style.css file just use
在你的 style.css 文件中使用
.sample {
your style here....
}
or else
要不然
<Panel className={styles.sample}>
<Panel className={styles.sample}>
then write your style inside
然后在里面写下你的风格
.sample{style here...}
.sample{style here...}
回答by dork
The colorattribute doesn't work in HTML5. You should use style="color: red;"or wrap the content in <font color="red">.
该color属性在 HTML5 中不起作用。您应该使用style="color: red;"或将内容包装在<font color="red">.
<p style={"color: " + color}>
Blah blah blah
</p>
or
或者
<p>
<font color={color}>
Blah blah blah
</font>
</p>
As for the button, your backgroundColoris bule. I'm guessing it should be blue?
至于按钮，你backgroundColor是bule。我猜应该是blue？
Your CSS file also won't be applied since there is no backgroundColorclass on your button and no fontStyleclass on your paragraph.
您的 CSS 文件也不会被应用，因为backgroundColor您的按钮上没有fontStyle类，段落上也没有类。
回答by Jithin Ks
Remember in react you are writing JSX and not html. For inline styling the p element you have to do this
请记住，在 React 中，您正在编写 JSX 而不是 html。对于内联样式 p 元素，您必须执行此操作
On line 22 of panel.js,
在 panel.js 的第 22 行，
<p className = "Autoprice" style = {{color:color}}>{price}</p>
<p className = "Autoprice" style = {{color:color}}>{price}</p>
On Botton.js
在 Botton.js 上
on line 6
在第 6 行
const styles = {
color:'blue',
background-color:'blue'
}
const styles = {
color:'blue',
background-color:'blue'
}
