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

Switch the scroll direction in the middle of the page and then switch it back

creating an HTML document with 2 interactive elements

Is it possible to execute functions inline with conditional logic in react?

What is the function of this.handleClick that is positioned on the LEFT side of the = operator?

Click here to open in a new tab and experience the ever-changing dynamic

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

How should one properly utilize the app and pages directories in a next.js project?

Error message encountered with React.js and Next.js: Attempting to iterate through a null object, resulting in a TypeError (property Symbol(Symbol.iterator

Guide to displaying API data in HTML format

Issues with Vue enter transitions not functioning as expected

When incorporating a background-image into my Vue.js project, I encountered this error

Inform the user that an error has occurred when attempting to perform an invalid

Electronic circuit embedded within a material-textured text field offering multiline functionality

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

Error found in the HTML tag data when viewing the page source for an issue

Tips for retaining directories in build when running npm run build

Activate the Alert (https://material-ui.com/components/alert/#alert) starting from the React component at the bottom of the hierarchy

What is the best way to determine the component type of a React lazy-loaded component?

Having trouble importing partials with Sass @import?

Display more/hide less form using div elements in a NextJS project