CODEWITHSUNDEEP
javascripthtmlcssreactjs
Peishi Long
Peishi Long

Reputation: 69

how to change the font color, font size, and button color in React

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

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

Upvotes: 2

Views: 54708

Answers (3)

Jithin Ks
Jithin Ks

Reputation: 529

Remember in react you are writing JSX and not html. For inline styling the p element you have to do this

On line 22 of panel.js,

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

On Botton.js

on line 6

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

Upvotes: 1

user9793164
user9793164

Reputation:

You write inline style...

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

or 

<Panel className="sample">

in your style.css file just use 

.sample {
 your style here....
}

or else

<Panel className={styles.sample}>

then write your style inside

.sample{style here...}

Upvotes: 5

dork
dork

Reputation: 4568

The color attribute doesn't work in HTML5. You should use style="color: red;" or wrap the content in <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 backgroundColor is bule. I'm guessing it should be blue?

Your CSS file also won't be applied since there is no backgroundColor class on your button and no fontStyle class on your paragraph.

Upvotes: 1

Related Questions