{"id":113103,"date":"2023-08-07T19:06:18","date_gmt":"2023-08-07T13:36:18","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=113103"},"modified":"2023-08-07T19:06:33","modified_gmt":"2023-08-07T13:36:33","slug":"styling-react-using-css","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/","title":{"rendered":"Styling React using CSS"},"content":{"rendered":"<p>React is a famous JS library used for making user interfaces. While React provides a simple way to build components and manage state, styling these components can be a challenge. In this article, we will take a closer look at the different ways to style React components using CSS.<\/p>\n<h3>CSS Styling in React<\/h3>\n<p>There are several ways to add CSS styles to React components, including:<\/p>\n<h4>1. Inline styling:<\/h4>\n<p>Inline styling is a simple way to style a single component. You can define styles as a JavaScript object and then pass it as a prop to the component. This method is useful for simple styles, but it can become difficult to maintain as the size of your project grows.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">const Header = () =&gt; {\r\n  return (\r\n    &lt;&gt;\r\n      &lt;h1 style={{color: \"red\"}}&gt;Hi, from DataFlair!&lt;\/h1&gt;\r\n      &lt;p&gt;Showing how to style&lt;\/p&gt;\r\n    &lt;\/&gt;\r\n  );\r\n}\r\n\r\nconst root = ReactDOM.createRoot(document.getElementById('root'));\r\nroot.render(&lt;Header \/&gt;);\r\n<\/pre>\n<p><strong>Output<\/strong>:<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/inline.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-113451\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/inline.png\" alt=\"inline\" width=\"421\" height=\"162\" \/><\/a><\/p>\n<h4>2. CSS Stylesheets:<\/h4>\n<p>You can also add CSS styles to your React components using stylesheets. This method is recommended when your project grows, as it makes it easier to manage and maintain your styles.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">import '.\/Example.css';\r\n\r\nconst Example = () =&gt; (\r\n  &lt;div className=\"example\"&gt;This is a tutorial from DataFlair&lt;\/div&gt;\r\n);\r\n<\/pre>\n<p><strong>CSS code<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.example {\r\n  color: red;\r\n  font-size: 20px;\r\n}\r\n<\/pre>\n<h4>3. Using CSS Modules:<\/h4>\n<p>CSS Modules is a technique that allows for locally scoped CSS by automatically generating unique class names for each selector. This helps to prevent naming collisions between CSS classes from different components.<\/p>\n<p>In React, CSS Modules can be used by enabling them with the css-loader package.<\/p>\n<p>To use CSS Modules in a React component, we can create a .module.css file instead of a regular .css file for the component&#8217;s styles. This tells the css-loader to use CSS Modules for that file.<\/p>\n<p>Here&#8217;s an example of how to use CSS Modules in a React component:<br \/>\nFirst, we create a file Button.module.css with the following content:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.btn {\r\n  background-color: #3498db;\r\n  color: white;\r\n  padding: 8px 16px;\r\n  font-size: 16px;\r\n}\r\n<\/pre>\n<p>Next, we import the CSS file and use the generated class names in our component:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">import React from 'react';\r\nimport styles from '.\/Button.module.css';\r\n\r\nconst Button = ({ children, onClick }) =&gt; {\r\n  return (\r\n    &lt;button className={styles.btn} onClick={onClick}&gt;\r\n      {children}\r\n    &lt;\/button&gt;\r\n  );\r\n};\r\n\r\nexport default Button;\r\n<\/pre>\n<p>The styles object is created by importing the CSS file with the import styles from &#8216;.\/Button.module.css&#8217;; statement. The btn class from the CSS file is then used as a property of the styles object<br \/>\nNote that the class name used in the CSS file (btn) is not used directly in the component.This helps to ensure that the class name is unique and not accidentally overridden by another component&#8217;s styles.<\/p>\n<h4>4. CSS-in-JS:<\/h4>\n<p>This is a modern approach to styling in React, where you write your styles as JavaScript objects. The advantage of this method is that you can easily style individual components, and your styles will be scoped to that component. There are several popular CSS-in-JS libraries available, including styled-components and emotion.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">import styled from 'styled-components';\r\n\r\nconst Header = () =&gt; {\r\n  const myStyle = {\r\n    color: \"white\",\r\n    backgroundColor: \"Red\",\r\n    padding: \"14px\",\r\n    fontFamily: \"Sans-Serif\"\r\n  };\r\n  return (\r\n    &lt;&gt;\r\n      &lt;h1 style={myStyle}&gt;Hello, from DataFlair!&lt;\/h1&gt;\r\n      &lt;p&gt;Adding a bit of style!!&lt;\/p&gt;\r\n    &lt;\/&gt;\r\n  );\r\n}\r\n\r\nconst root = ReactDOM.createRoot(document.getElementById('root'));\r\nroot.render(&lt;Header \/&gt;);\r\n<\/pre>\n<p><strong>Output<\/strong>:<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/js.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-113452\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/js.png\" alt=\"js\" width=\"657\" height=\"234\" \/><\/a><\/p>\n<h3>Conclusion:<\/h3>\n<p>Styling in React can be challenging, but with these different methods, you can easily add styles to your components. The best method to use depends on the size and complexity of your project. Whether you choose inline styling, stylesheets, or CSS-in-JS, React provides a flexible and powerful way to style your components.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is a famous JS library used for making user interfaces. While React provides a simple way to build components and manage state, styling these components can be a challenge. In this article, we&#46;&#46;&#46;<\/p>\n","protected":false},"author":581,"featured_media":113450,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27227],"tags":[27404],"class_list":["post-113103","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-tutorials","tag-styling-react-using-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Styling React using CSS - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn Styling React using CSS using different ways like inline styling, stylesheets, CSS-in-JS etc with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styling React using CSS - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn Styling React using CSS using different ways like inline styling, stylesheets, CSS-in-JS etc with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T13:36:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-07T13:36:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/react-css-styling.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styling React using CSS - DataFlair","description":"Learn Styling React using CSS using different ways like inline styling, stylesheets, CSS-in-JS etc with examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/","og_locale":"en_US","og_type":"article","og_title":"Styling React using CSS - DataFlair","og_description":"Learn Styling React using CSS using different ways like inline styling, stylesheets, CSS-in-JS etc with examples.","og_url":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-08-07T13:36:18+00:00","article_modified_time":"2023-08-07T13:36:33+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/react-css-styling.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"Styling React using CSS","datePublished":"2023-08-07T13:36:18+00:00","dateModified":"2023-08-07T13:36:33+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/"},"wordCount":462,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/react-css-styling.webp","keywords":["Styling React using CSS"],"articleSection":["React Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/styling-react-using-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/","url":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/","name":"Styling React using CSS - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/react-css-styling.webp","datePublished":"2023-08-07T13:36:18+00:00","dateModified":"2023-08-07T13:36:33+00:00","description":"Learn Styling React using CSS using different ways like inline styling, stylesheets, CSS-in-JS etc with examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/styling-react-using-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/react-css-styling.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/react-css-styling.webp","width":1200,"height":628,"caption":"react css styling"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/styling-react-using-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"React Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/react-tutorials\/"},{"@type":"ListItem","position":3,"name":"Styling React using CSS"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=113103"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113103\/revisions"}],"predecessor-version":[{"id":117725,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113103\/revisions\/117725"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/113450"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=113103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=113103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=113103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}