如何使用SASS类重写Material UI组件并迁移样式至.scss文件？

Got it, let's walk through exactly how to move those bulky inline-style objects into proper .scss files and reference them in your Material UI components—just like you would with regular HTML elements.

Step 1: Split Your Styles Object into .scss Classes #

First, take that giant styles object you've been maintaining and translate each property block into a CSS class in your .scss file. Use SCSS's nesting feature to cleanly handle child elements (like your .checkbox-thing span and its input).

For example, if your original styles looked like this:

const styles = {
  column: {
    padding: '16px',
    backgroundColor: '#f5f5f5',
    textAlign: 'left'
  },
  checkboxThing: {
    marginRight: '8px'
  },
  checkboxInput: {
    accentColor: '#2196f3'
  }
}

Your .scss file would look like this:

// components/TableStyles.scss
.table-row-column {
  padding: 16px;
  background-color: #f5f5f5;
  text-align: left;

  // Nest child elements directly
  .checkbox-thing {
    margin-right: 8px;

    input {
      accent-color: #2196f3;
    }
  }
}

Step 2: Import the .scss File into Your React Component #

Next, bring your styles into the component file where you're using the Material UI components. Just add this import at the top:

import './TableStyles.scss'; // Adjust the path to match your file structure

If you want to avoid global class name conflicts (super helpful in larger apps), use CSS Modules instead. Rename your file to TableStyles.module.scss, then import it like this:

import styles from './TableStyles.module.scss';

Step 3: Replace style Props with className #

Now, swap out the inline style prop on your Material UI components with the className prop—exactly like you do with regular HTML elements.

For Global SCSS: #

<TableRowColumn key={index} className="table-row-column">
  <span className="checkbox-thing">
    <input type="checkbox" checked={this.props.isChecked} />
  </span>
</TableRowColumn>

For CSS Modules: #

<TableRowColumn key={index} className={styles['table-row-column']}>
  <span className={styles['checkbox-thing']}>
    <input type="checkbox" checked={this.props.isChecked} className={styles['checkbox-input']} />
  </span>
</TableRowColumn>

Step 4: Handle Material UI Default Style Priority #

Sometimes Material UI's built-in styles might override your custom SCSS. To fix this, make your selectors more specific. For example, target the Material UI component's root class along with your custom class:

// Override Material UI's default TableRowColumn styles
.MuiTableRowColumn-root.table-row-column {
  padding: 16px;
  background-color: #f5f5f5;
}

You can find the root class name for any Material UI component in its documentation (look for the "CSS" section under each component's docs).

Bonus: Nested Material UI & Custom Components #

This approach works for nested Material UI components too! If you have a Button inside your TableRowColumn, just add your custom class to it:

<TableRowColumn className="table-row-column">
  <Button className="custom-action-button">Click Me</Button>
</TableRowColumn>

Then define the class in your .scss file:

.custom-action-button {
  background-color: #ff4081;
  color: white;

  // Override hover state
  &:hover {
    background-color: #f50057;
  }
}

That's it! You'll now have all your styles organized in .scss files, making them easier to maintain and scale—no more giant inline style objects cluttering your component code.

内容的提问来源于stack exchange，提问作者Bob Smith