0

Currently I started working on React SPFx webparts and wanted to add some new CSS.

I added some styling to classes in Project.Module.scss. But Now when I am adding this class names in render() method , it's saying Property .tableStyle does not exists.

According to some posts, SPFx converts this styles to data types and append unique code to className to keep them unique.

Now, If I add manually to project.Module.scss.ts and project.Module.scss.d.ts then only render() method taking this style classes.

As per some blogs, We don't have to make changes in other 2 files. Need Suggestion.

In following code, I have added .test class styling, whereas rest classes were already present in .scss file.

.reactScriptEditorWp {

  .test{
display: none;

  }

  .tableStyle{ 
    display:  table ;
    margin-left :  100px ;
  }
  .container {
    max-width: 700px;
    margin: 0px auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  }

  .row {
    @include ms-Grid-row;
    @include ms-fontColor-white;
    background-color: $ms-color-themeDark;
    padding: 20px;
  }

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

project.tsx file:

return ( 

      <div className={styles.reactScriptEditorWp} >
        <br></br>

        <br></br>
        <div className={styles.tableCaptionStyle} > Retrieve SharePoint List Items using SPFx , REST API  & React JS  </div>
        <br></br>
         <div className={styles.test} > Employee Details</div>
        <div className={styles.test} >  

          <div className={styles.test} > 
            <div className={styles.test}>Employee Name</div> 
            <div className={styles.test}>Employee Id </div> 
            <div className={styles.test}>Experience</div> 
              <div className={styles.test}>Location</div>                    
          </div> 
</div>
</div>
2
  • Is { missing in your .scss file also or it is just here because you have copy pasted it wrong. Sep 20, 2019 at 11:28
  • Yes.. sorry I copy Pasted it wrong here. I Tried to paste part of the code rather than whole code Sep 20, 2019 at 11:48

1 Answer 1

0

If you have no errors, the css class name should become available on the tsx file after a build. If it doesn't, you can go to the definition of your imported styles and you should see the new class available. After this, the editor becomes aware of the new class.

To go to the styles definition, simply click on the "styles" word at the import and press F12. import styles from './HelloWorldWebPart.module.scss';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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