{"id":7233,"date":"2019-06-23T13:00:56","date_gmt":"2019-06-23T13:00:56","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7233"},"modified":"2019-06-23T13:00:56","modified_gmt":"2019-06-23T13:00:56","slug":"react-and-css","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/react-and-css\/","title":{"rendered":"React and CSS"},"content":{"rendered":"

There are several ways to use CSS within React applications.<\/p>\n

Inline CSS<\/strong><\/p>\n

We can create a structural type as a variable or const (more likely), for example<\/p>\n

\r\nconst style = {\r\n  background: 'red',\r\n  width: '100px',\r\n  color: 'white'\r\n};\r\n\r\nexport const MyStyledDiv: React.SFC<{}> = ({\r\n}) => <div style={style}>Hello World<\/div>\r\n<\/pre>\n
In this case we’re using React.SFC just to reduce the code to a minimal, but fully fledged Components would work in the same way within the render function.<\/p>\n
Style based components<\/strong><\/p>\n
With style based components we in essence create a component from the style using the back tick syntax along with the prefix styled.{element type}, so for example<\/p>\n
\r\nconst DivStyle = styled.div`\r\n  background: red;\r\n  width: 100px;\r\n  color: white;\r\n`;\r\n\r\nexport const MyStyledDiv: React.SFC<{}> = ({\r\n}) => <DivStyle>Hello World<\/DivStyle>\r\n<\/pre>\n
CSS Modules<\/strong><\/p>\n
We can create separate files for our css (known as CSS Module StyleSheets<\/a>).<\/p>\n
In this case we create a .css file, for example MyStyledDiv.module.css which uses standard CSS syntax, so for example here my file<\/p>\n
\r\n.myDivStyle {\r\n    background-color: red;\r\n    width: 100px;\r\n    color: white;\r\n}\r\n<\/pre>\n
Now in our component we import the CSS in much the same way as importing components, for example<\/p>\n
\r\nimport styles from '.\/MyStyledDiv.module.css';\r\n\r\nexport const MyStyledDiv: React.SFC<{}> = ({\r\n}) => <div className={styles.myDivStyle}>Hello World<\/div>\r\n<\/pre>\n
These style sheets are locally scoped to the component which imports them which helps us to reduce possible name clashes etc.<\/p>\n
Standard CSS files<\/strong><\/p>\n
In this case we have standard CSS files, here we have a file named myStyleDiv.css with the following (which is the same as our module.css contents)<\/p>\n
\r\n.myDivStyle {\r\n    background-color: red;\r\n    width: 100px;\r\n    color: white;\r\n}\r\n<\/pre>\n
Now we again import the CSS like this<\/p>\n
\r\nimport '.\/MyStyledDiv.css';\r\n\r\nexport const MyStyledDiv: React.SFC<{}> = ({\r\n}) => <div className="myDivStyle">Hello World<\/div>\r\n<\/pre>\n
Emotion<\/strong><\/p>\n
We can also use third party library’s such as emotion<\/a>.<\/p>\n
Here’s the same example using emotion<\/p>\n
\r\nconst DivStyle = styled.div(props => ({\r\n  background: 'red',\r\n  width: '100px',\r\n  color: 'white'\r\n}))\r\n\r\nexport const MyStyledDiv: React.SFC<{}> = ({\r\n}) => <DivStyle>Hello World<\/DivStyle>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
There are several ways to use CSS within React applications. Inline CSS We can create a structural type as a variable or const (more likely), for example const style = { background: ‘red’, width: ‘100px’, color: ‘white’ }; export const MyStyledDiv: React.SFC<{}> = ({ }) => <div style={style}>Hello World<\/div> In this case we’re using React.SFC […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243],"tags":[],"class_list":["post-7233","post","type-post","status-publish","format-standard","hentry","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7233"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7233\/revisions"}],"predecessor-version":[{"id":7244,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7233\/revisions\/7244"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}