Styling Your React App
•
2 likes•530 views
The document discusses different options for styling React components, including: - Using regular CSS files and importing them into React components - Using CSS preprocessors like Sass/Stylus for more powerful CSS - Defining styles as objects and applying them with inline styling - Using a React-specific styling library called React Style that allows defining styles with objects and media queries Each option has pros and cons in terms of familiarity, reusability, dynamic styling capabilities, and code organization. The document also shows examples of implementing inline styling logic and reusing styles between components. In the end, it invites the audience to ask questions.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Styling Your React App
Similar to Styling Your React App (20)
More from Riza Fahmi
More from Riza Fahmi (20)
Recently uploaded
Recently uploaded (20)
Styling Your React App
- 2. RIZA,CURRICULUMDIRECTOR,CO-FOUNDER “Hacktiv8 Ada Untuk Menciptakan Developer Handal Yang Bisa Berjaya Di Negara Sendiri"
- 4. Let’s talk about styling
- 5. Good Old CSS Brand New React Styling
- 6. Good Old CSS
- 9. Good Old CSS // index.css body { margin: 0; padding: 0; font-family: sans-serif; } // App.jsx import './index.css' ReactDOM.render( <App />, document.getElementById('root') )
- 10. Styling Your CSS Using // index.styl border-radius() -webkit-border-radius: arguments -moz-border-radius: arguments border-radius: arguments .cool_button border-radius(5px) // react.js import './index.styl' const CoolButton = () => ( <button className=‘cool_button’>Confirm </button> )
- 11. Pros Familiar
- 12. Cons
- 16. Bad For Dynamic UI
- 19. // cool.js import styles from './styles.css' export const CoolButton = (props) => { return ( <button className={styles.red}>{this.props.text} </button> ) } /* styles.css */ .red { font-size: 25px; background-color: red; color: white; }
- 20. Pros
- 22. Cons
- 25. import StyleSheet from 'react-style' const styles = StyleSheet.create({ primary: { backgroundColor: 'green' }, button: { padding: '1em' }, // media queries '@media (max-width: 200px)': { button: { width: '100%' } } }) // ... <button styles={[styles.button, styles.primary]}>Confirm </button>
- 26. Pros
- 28. import styles from './styles.js' <button styles={[styles.button, styles.primary]}>Confirm </button>
- 29. Cons
- 33. Inline Styling
- 34. const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: ‘all’, height: 20, } function App () { return <div style={divStyle}>Hello World! </div> }
- 35. Pros
- 36. Implement Logic <div> <input onChange={this.handleColorChange} /> <input type='number' onChange={this.handleSizeChange} /> <p style={{ color: this.state.color, fontSize: this.state.fontSize }} > This paragraph is {this.state.color} and {this.state.fontSize} px </p> </div>
- 38. Code Reusability
- 39. Style Next To Markup const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: 'all' } function App () { return <div style={divStyle}>Hello World! </div> }
- 40. Cons
- 48. Let’s have some question