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

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

• javascript
• html
• css
• reactjs

• 1 add your'e code without code we can't help – Randall Commented May 21, 2018 at 5:56
• 1 CODE not images please – לבני מלכה Commented May 21, 2018 at 5:59

3 Answers 3

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...}

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.

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'
}