Skip to content

Files

Failed to load latest commit information.

Latest commit

 Cannot retrieve latest commit at this time.

History

History

solution

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
components
components
 
 
App.js
App.js
 
 
README.md
README.md
 
 
app.css
app.css
 
 
entry.js
entry.js
 
 
package.json
package.json
 
 

README.md

Radium Solution Notes

1. Import the StyleRoot componet from radium and wrap App.js with StyleRoot

import { StyleRoot } from 'radium'

// inside render
return (
  <StyleRoot>
    your app code here
  </StyleRoot>
)

2. Uncomment this line inside app.css to import our global stylesheet into App.js

@import url("../../public/css/app.css");

3. Add the ButtonBuyNow component to the ShoppingCart.js component

import { ButtonBuyNow } from './index'

// render it after the Cart Total amount
<ButtonBuyNow />

4. Apply custom styling to ButtonBuyNow.js

const customStyles = {
  btn: {
    backgroundColor: '#ec4800',
    width: '110px',
    ':hover': {
      backgroundColor: '#f98d00',
    }
  }
}

5. Extra credit - Pass these props to ButtonBuyNow inside of ShoppingCart.js

(onClick and disabled). The first one is to go to the confirmation page, and the second one is to disable the button if the cart is empty.

<ButtonBuyNow 
  onClick={ this.props.onBuy }
  disabled={ totalPrice === 0 }
/>