CSS in JSの話 #friday13json
1 like1,108 views
CSS in JS allows defining styles for React components using JavaScript objects and functions instead of traditional CSS files. Styles can be defined as JavaScript objects and applied to components using the style prop. This avoids issues with CSS specificity, scoping, and separation of technologies. Styles defined in JS are also minified and cached by React for improved performance. Frameworks like Aphrodite provide an API for defining styles in JS and conditionally applying styles based on media queries and pseudo-classes for both React web and native applications.
CSS in JSの話 #friday13json
- 1. CSS in JS Yukiya Nakagawa JSON #9 2017.10.13(Fri) @Nkzn
- 2. Q. CSS in JS is
- 3. A. JS CSS const coolFont = { fontFamily: "CoolFont", fontStyle: "normal", fontWeight: "normal", src: "url('coolfont.woff2') format('woff2')" }; const styles = { heading: { color: 'gray', fontSize: '2rem' }, text: { marginTop: '1rem', margin: 10 } };
- 4. React const Hoge = (props) => { return ( <div> <h1 style={styles.heading}> </h1> <p style={styles.text}> </p> <p style={{ color: red }}>{props.hoge}</p> </div> ); }
- 5. JSON ※
- 6. CSS
- 9. CSS in JS
- 10. React Native 😎 https://facebook.github.io/react-native/docs/height-and-width.html
- 11. StyleSheet.create import { StyleSheet } from 'react-native'; const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); <span style={styles.red}>hoge</span>
- 12. Web CSS
- 15. import { StyleSheet } from 'aphrodite'; const styles = StyleSheet.create({ red: { backgroundColor: ‘red' }, blue: { backgroundColor: ‘blue’ }, hover: { ':hover': { backgroundColor: 'red' } }, small: { '@media (max-width: 600px)': { backgroundColor: 'red', } } }); }
- 16. RN import { css } from 'aphrodite'; const App = (props) => { return ( <div> <span className={css(styles.red)}>This is red.</span> <span className={css(styles.hover)}>This turns red on hover.</span> <span className={css(styles.small)}> This turns red when the browser is less than 600px width. </span> <span className={css(styles.red, styles.blue)}>This is blue.</span> <span className={css(styles.blue, styles.small)}> This is blue and turns red when the browser is less than 600px width. </span> </div> ); }
- 18. 🤔
- 19. 🤡
- 22. AB ※
- 23. CSS in JS 💪