In this article I will describe two ways to use CSS in React.<\/p>\n
Define CSS styles ‘inline’ inside React. This uses the props key ‘style’, which uses a dictionary to define all of the CSS attributes. However, these CSS attributes have differences from normal CSS. For example, Here is what the React code with inline styles looks like:<\/p>\n Note:<\/strong> Here is the syntax that you would use when using JSX. Notice the double curly braces:<\/p>\n <\/p>\n Instead of defining the styles ‘inline’ as shown above, you can use standard CSS. For example:<\/p>\n In the React code, all we need to use this CSS class is a prop called className.<\/p>\n (We don’t need the style prop.) <\/p>\n","protected":false},"excerpt":{"rendered":" In this article I will describe two ways to use CSS in React. Option 1: Inline Define CSS styles ‘inline’ inside React. This uses the props key ‘style’, which uses a dictionary to define all of the CSS attributes. However, these CSS attributes have differences from normal CSS. For example, 1. The attribute names must … Continue reading React: How to use CSS in React<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,111],"tags":[10,45,114,110],"class_list":["post-1667","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-react-js","tag-css","tag-javascript","tag-jsx","tag-react-js"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1667"}],"version-history":[{"count":7,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1667\/revisions"}],"predecessor-version":[{"id":1722,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1667\/revisions\/1722"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n1. The attribute names must be in camelCase, so the CSS attribute\u00a0font-family<\/code>would be changed to fontFamily<\/code>.
\n2. The value portion of each attribute must be a string (surrounded by single quotes).
\n3. Each key-value pair is followed by a comma (since it is just another key-value pair inside the styles dictionary)<\/p>\nfunction cell(props) {\r\n return React.createElement(\r\n 'div', \r\n {\r\n style: {\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n display: 'flex',\r\n fontFamily: 'Arial',\r\n fontSize: '3rem',\r\n fontWeight: 'bold',\r\n background: 'white'\r\n },\r\n id : props.number,\r\n onClick: props.onClick\r\n }, \r\n )\r\n}<\/pre>\n<h1 style={{fontFamily:\"Arial\"}}>React Tic-Tac-Toe<\/h1><\/pre>\nOption 2: CSS<\/h3>\n
.cell {\r\n justify-content: center;\r\n align-items: center;\r\n display: flex;\r\n font-family: Arial;\r\n font-size: 3rem;\r\n font-weight: bold;\r\n background: white;\r\n}<\/pre>\nclassName: \"cell\"<\/pre>\n
\nHere is what the React code looks like without the inline styles:<\/p>\nfunction cell(props) {\r\n return React.createElement(\r\n 'div', \r\n {\r\n className: \"cell\",\r\n id : props.number,\r\n onClick: props.onClick\r\n }, \r\n )\r\n}<\/pre>\n