Customize Material UI components by incorporating SASS classes

Question

Customize Material UI components by incorporating SASS classes

Currently, I am using Material UI components but I want to streamline my styles by moving them all into a .scss file. Right now, I have a significant styles object within the same JavaScript file where I am utilizing the Material UI components. This styles object is passed to the Material UI components through the style prop, essentially resulting in inline styling. My aim is to eliminate this practice. Additionally, I have nested components (both Material UI and custom React ones) within these Material UI components.

 const styles= {//my css styles go here}

<TableRowColumn key={index} style={styles.column}>
     <span className="checkbox-thing">
       <input
         ....
       />
     </span>
</TableRowColumn>

I have looked at the override documentation: Material UI Next Customization Overrides

I also came across this Stack Overflow question: How to style material ui next components with styled components and SASS

In my opinion, neither of these resources provides clear guidance on how to use an external .scss file to store styles and then reference those class names within the Material UI component. Ideally, I would like to achieve something similar to working with normal HTML elements:

<input   
    type="checkbox"
    checked={
      this.props.isChecked
    }
    className="someClassInTheSCSSFile"
/>

To sum up, my goals are:

Move my large styles object into separate classes in a .scss file
Reference a class from the .scss file and apply it to a Material UI component

html css reactjs sass material-ui

Answer 1

Answer №1

It's a mystery why this approach is suddenly working now when it didn't before, but using

className="someClassInTheSCSSFile"

seems to do the trick as long as my .scss file includes something like:

//.scss file

.someClassInTheSCSSFile {
   color: blue;
   //rest of the styles go here
}

So, in short, utilizing the className prop directly inside MATERIAL UI components does work. For example, my code snippet below functions as intended:

//Javascript file

<TableRowColumn key={index} className="someClassInTheSCSSFile">
 <span className="checkbox-thing">
   <input
     ....
   />
 </span>
</TableRowColumn>

The real challenge arises when trying to dynamically pass a value to the CSS property. Let's say the width attribute of the TableRowColumn component shouldn't be hardcoded in the .scss file. When I attempt to achieve this without using inline styling, it becomes quite problematic. If the colWidth parameter needs to be passed into the css width attribute of the TableRowColumn component, it seems nearly impossible at the moment. The workaround involves:

//Javascript File

<TableRowColumn key={index} style={{width:`${coldWidth}`}} className="someClassInTheSCSSFile">
 <span className="checkbox-thing">
   <input
     ....
   />
 </span>
</TableRowColumn>

This leads to inline styling, which goes against my initial goal. Thus, I end up with both inline styling and a className that references my .scss file, making the solution seem clunky and cumbersome. Can the attr() function within the .scss file offer a better alternative? Unfortunately, according to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/attr), only strings can be supported by this method, while other data types are not widely recognized in mainstream browsers. Take a look at this codepen (https://jsfiddle.net/hmr0hckf/131/) for a demonstration. Ultimately, it seems that inline styling is unavoidable if dynamic changes to css attributes are required.

Answer 2

It's a mystery why this approach is suddenly working now when it didn't before, but using

className="someClassInTheSCSSFile"

seems to do the trick as long as my .scss file includes something like:

//.scss file

.someClassInTheSCSSFile {
   color: blue;
   //rest of the styles go here
}

So, in short, utilizing the className prop directly inside MATERIAL UI components does work. For example, my code snippet below functions as intended:

//Javascript file

<TableRowColumn key={index} className="someClassInTheSCSSFile">
 <span className="checkbox-thing">
   <input
     ....
   />
 </span>
</TableRowColumn>

The real challenge arises when trying to dynamically pass a value to the CSS property. Let's say the width attribute of the TableRowColumn component shouldn't be hardcoded in the .scss file. When I attempt to achieve this without using inline styling, it becomes quite problematic. If the colWidth parameter needs to be passed into the css width attribute of the TableRowColumn component, it seems nearly impossible at the moment. The workaround involves:

//Javascript File

<TableRowColumn key={index} style={{width:`${coldWidth}`}} className="someClassInTheSCSSFile">
 <span className="checkbox-thing">
   <input
     ....
   />
 </span>
</TableRowColumn>

This leads to inline styling, which goes against my initial goal. Thus, I end up with both inline styling and a className that references my .scss file, making the solution seem clunky and cumbersome. Can the attr() function within the .scss file offer a better alternative? Unfortunately, according to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/attr), only strings can be supported by this method, while other data types are not widely recognized in mainstream browsers. Take a look at this codepen (https://jsfiddle.net/hmr0hckf/131/) for a demonstration. Ultimately, it seems that inline styling is unavoidable if dynamic changes to css attributes are required.

Answer 3

Answer №2

Implementing Webpack with node-sass and sass-loader

Getting the hang of it! Just gather all your styles in one or multiple .scss files, business as usual. Let's say you have a class called "nodeContent."

.nodeContent {
   position: absolute;
   top: 0;
   bottom: 0;
   display: flex;
   align-items: center;
}

All you have to do is import your styles and access the class names like properties of your styles object. For instance, if I have a Sass file named styles.scss in the same directory as my component, I can import them this way:

import * as styles from './styles.scss'

The 'styles' variable is an object that allows me to refer to my classes similar to any other object property. So, when I want to apply the nodeContent class on a material component, I can simply do this:

<Card className={styles.nodeContent} />

If You're Not Using Webpack (not entirely certain on this)

You may compile your .scss files into .css format and link them as a stylesheet in your index.html file. Subsequently, you should be able to use the classNames as strings as demonstrated above. Here's a related article I came across where they import the css file within their component:

Answer 4

Implementing Webpack with node-sass and sass-loader

Getting the hang of it! Just gather all your styles in one or multiple .scss files, business as usual. Let's say you have a class called "nodeContent."

.nodeContent {
   position: absolute;
   top: 0;
   bottom: 0;
   display: flex;
   align-items: center;
}

All you have to do is import your styles and access the class names like properties of your styles object. For instance, if I have a Sass file named styles.scss in the same directory as my component, I can import them this way:

import * as styles from './styles.scss'

The 'styles' variable is an object that allows me to refer to my classes similar to any other object property. So, when I want to apply the nodeContent class on a material component, I can simply do this:

<Card className={styles.nodeContent} />

If You're Not Using Webpack (not entirely certain on this)

You may compile your .scss files into .css format and link them as a stylesheet in your index.html file. Subsequently, you should be able to use the classNames as strings as demonstrated above. Here's a related article I came across where they import the css file within their component:

Customize Material UI components by incorporating SASS classes

Answer №1

Answer №2

Implementing Webpack with node-sass and sass-loader

If You're Not Using Webpack (not entirely certain on this)

Similar questions

A navigation bar resembling the style of Google's Inbox web application

The asynchronous ajax request is leading to a browser freeze

Attempting to update an AJAX field with the returned value, but it only updates after clicking away from it

Creating responsive D3.js charts for various screen sizes and devices

What is the best way to stack several items vertically beside an image?

Changing the visibility of a button based on a checkbox in JavaScript - here's how

Encountering an issue when trying to send data with Axios client to the child component

Creating a custom type for the parameter of an arrow function in Typescript

extract information from an external JSON document

What is the best way to stop a current action when a new action is initiated?

What causes the static data on each request in Next.js dynamic pages?

Combine the content from multiple text areas and submit it to another text area

Is the input box failing to show up on your screen?

Tips for filling in the values for the options in a select dropdown menu

Received an unexpected argument count of 1 instead of the expected 0 while passing a function as a prop to a child component

Encountering an error during package installation in Npm

The styles defined in CSS do not have an impact on EJS templates that have GET route paths stacked

The propagation of SVG events from embedded images via the <image> elements

How can you make the browser window scroll horizontally when a div is clicked using jQuery?

Function compilation did not succeed in the module