1

I am facing problems that I can't change the scss file which is there when you create a SPFx webpart in React.

When I try to change color of the webpart nothing happens. I am building an RSS Feed in SPFx.

I will add a part of the code snippet in the tsx file.

RssApp.tsx:

import styles from '../RssApp.module.scss';
    let newsElement = (element: IRssItem)=> { //Newly added
        return (
              <div className = {styles.row} >
                  <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div>
                  <div className={ styles.description }>{element.description}</div>

                  <div>{element.author}</div>
              </div>
        );
    };

    return (
      <div className = {styles.column}>

          <DefaultButton
            data-automation-id="test"
            text="Settings"
            onClick={this._showPanel}
          /> 
          {this.state.items.map(newsElement)}
          {settingsPanel}
      </div>


    );

the scss file:

RssApp.module.scss(As you see I have commented out the original code and added a new class (myTitle) to see if it works):

// @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';



 .rssApp {
     .myTitle{
        background-color: blue;
      }
//   .container {
//     max-width: 800px;
//     margin: 0px auto;
//     box-shadow: 0 2px 4px 0 rgba(90, 21, 21, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
//   }

//   .row{
//     background-color: blue;
//   }

//   .row {
//     background-color: black;
//   }

//   .column {
//     @include ms-Grid-col;
//     @include ms-lg10;
//     @include ms-xl8;
//     @include ms-xlPush2;
//     @include ms-lgPush1;

//   }

//   .title {
//     @include ms-font-l;
//     @include ms-fontColor-white;
//     background-color: $ms-color-themePrimary;
//   }

//   .subTitle {
//     @include ms-font-l;
//     @include ms-fontColor-white;
//   }

//   .description {
//     @include ms-font-l;
//     @include ms-fontColor-white;
//   }

//   .button {
//     // Our button
//     text-decoration: none;
//     height: 32px;

//     // Primary Button
//     min-width: 80px;
//     background-color: $ms-color-themePrimary;
//     border-color: $ms-color-themePrimary;
//     color: $ms-color-white;

//     // Basic Button
//     outline: transparent;
//     position: relative;
//     font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
//     -webkit-font-smoothing: antialiased;
//     font-size: $ms-font-size-m;
//     font-weight: $ms-font-weight-regular;
//     border-width: 0;
//     text-align: center;
//     cursor: pointer;
//     display: inline-block;
//     padding: 0 16px;

//     .label {
//       font-weight: $ms-font-weight-semibold;
//       font-size: $ms-font-size-m;
//       height: 32px;
//       line-height: 32px;
//       margin: 0 4px;
//       vertical-align: top;
//       display: inline-block;
//     }
//   }

 }

As you see, I have added a new class called myTitle and added to the styles RssApp.module.scss.ts:

/* tslint:disable */
require("./RssApp.module.css");
const styles = {
  rssApp: 'rssApp_9a4695d5',
  container: 'container_9a4695d5',
  row: 'row_9a4695d5',
  column: 'column_9a4695d5',
  'ms-Grid': 'ms-Grid_9a4695d5',
  myTitle: 'myTitle_9a4695d5',
  //title: 'title_9a4695d5',
  subTitle: 'subTitle_9a4695d5',
  description: 'description_9a4695d5',
  button: 'button_9a4695d5',
  label: 'label_9a4695d5',
};

export default styles;
/* tslint:enable */

But still no change to my RSS Feed: enter image description here

Would appreciate if someone could help me. Thanks


Now when I make following changes: RssApp.tsx

    let newsElement = (element: IRssItem)=> { //Newly added
        return (
              <div className = {styles.rssApp}>
                <div className = {styles.row} >
                  <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div>
                  <div className={ styles.description }>{element.description}</div>

                  <div>{element.author}</div>
                </div>
              </div>
        );
    };

    return (
      <div className={styles.rssApp}>
        <div className = {styles.column}>

          <DefaultButton
            data-automation-id="test"
            text="Settings"
            onClick={this._showPanel}
          /> 
          {this.state.items.map(newsElement)}
          {settingsPanel}
        </div>
      </div>

    );

And RssApp.module.scss:

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

     .rssApp{
        width: 100%;
        padding: 10px;
        background-color: black;

        .myTitle{
          color: red;

        }
      }

But instead I get the SPFx standard blue color as background color even though I haven't chosen that color in my scss:

enter image description here

What am I doing wrong or missing out?

  • I would suggest following items to double check: #1. Caching of css files. CSS files are cached by most of the browsers, please check if this is not the case. And, #2. It seems some extra characters are being appended to the style names once the web part is deployed. In this case change you css file to use selectors,like: [class^="rssApp-"], [class*=" rssApp-"] { background-color: blue; } – UBK Jun 3 at 15:30
2

As I was going through your code, I see you are missing adding top level class to wrapper container. Dont get confused here, the SCSS works in a similar way as CSS. When you nest css classes in SCSS file, it means they will follow the HTML DOM hierarchy. See the below explanation:

SCSS File Content:

.rssApp {
     width: 100%;
     padding: 10px;

     .myTitle{
        background-color: blue;
      }
}

This SCSS code will be transpiled to following CSS code:

.rssApp {
    width: 100%;
    padding: 10px;
}

.rssApp .myTitle {
    background-color: blue;
}

This means, in order to apply css to myTitle class you need to have rssApp class as its parent. Which is missing from the code I see you had written. So if you update line number 4 on RssApp.tsx file from {styles.row} to {styles.rssApp}, it will start addressing all the css changes you make for myTitle class.

  • Now in wrote my scss file like this: ` .rssApp{ width: 100%; padding: 10px; background-color: black; .myTitle{ color: red; }` – kelank Jun 3 at 22:58
  • RssApp.tsx: ``` let newsElement = (element: IRssItem)=> { //Newly added return ( <div className = {styles.rssApp}> <div className = {styles.row} > <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div> <div className={ styles.description }>{element.description}</div> <div>{element.author}</div> </div> </div> ); }; ``` – kelank Jun 3 at 23:01
  • but I get the SPFx standard blue background color even though I never wrote that color anywhere in my code – kelank Jun 3 at 23:02
  • Hi @kelank as I read your code, it looks fine now. I guess there is some issue with import statement or with solution structure. I had create a github solution for you. Please read the instruction first. github.com/thinkb4code/scssBootstrap – ThinkB4Code Jun 4 at 17:44
2

Kelank,

I think you may be experiencing issues because you need to add an element and give it the .rssApp class name. For example, try this:

import styles from '../RssApp.module.scss';
    let newsElement = (element: IRssItem)=> { //Newly added
        return (
              <div className = {styles.row} >
                  <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div>
                  <div className={ styles.description }>{element.description}</div>

                  <div>{element.author}</div>
              </div>
        );
    };

    return (
<div className={styles.rssApp}>
      <div className = {styles.column}>

          <DefaultButton
            data-automation-id="test"
            text="Settings"
            onClick={this._showPanel}
          /> 
          {this.state.items.map(newsElement)}
          {settingsPanel}
      </div>
</div>
    );

The lines I have added are:

<div className={styles.rssApp}>

and a closing </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.