![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>](https://image.slidesharecdn.com/stylingyourreactapp-react-170307074652/85/Styling-Your-React-App-25-320.jpg)
![import styles from './styles.js'
<button styles={[styles.button, styles.primary]}>Confirm
</button>](https://image.slidesharecdn.com/stylingyourreactapp-react-170307074652/85/Styling-Your-React-App-28-320.jpg)
Styling Your React App
Download as PDF, PPTX2 likes564 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.
More Related Content
![[141] react everywhere](https://cdn.slidesharecdn.com/ss_thumbnails/141react-everywhere-150914022631-lva1-app6891-thumbnail.jpg?width=560&fit=bounds)
![[123] electron 김성훈](https://cdn.slidesharecdn.com/ss_thumbnails/123electron-161023163310-thumbnail.jpg?width=560&fit=bounds)
Similar to Styling Your React App(20)
Styling Your React App
- 1.
- 2. RIZA,CURRICULUMDIRECTOR,CO-FOUNDER “Hacktiv8 Ada UntukMenciptakan Developer Handal Yang Bisa Berjaya Di Negara Sendiri"
- 3.
- 4. Let’s talk aboutstyling
- 5. Good Old CSS BrandNew React Styling
- 6.
- 7.
- 8.
- 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 CSSUsing // 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.
- 12.
- 16.
- 17.
- 19. // cool.js import stylesfrom './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.
- 22.
- 24.
- 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.
- 28. import styles from'./styles.js' <button styles={[styles.button, styles.primary]}>Confirm </button>
- 29.
- 33.
- 34. const divStyle ={ color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: ‘all’, height: 20, } function App () { return <div style={divStyle}>Hello World! </div> }
- 35.
- 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.
- 39. Style Next ToMarkup const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: 'all' } function App () { return <div style={divStyle}>Hello World! </div> }
- 40.
- 48. Let’s have somequestion