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

7. CSS 7
https://speakerdeck.com/vjeux/react-css-in-js

8. 7
1.
2.
3.
4. minify
5.
6.
7.

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

14. https://github.com/Khan/aphrodite

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 💪