Building an App with SPFx, Reactjs, and TypeScript Part 5: Styling Components

~ Jason Rivera

Introduction

Part 4 was a bit long so let’s go over a lighter topic and talk about styling. We’ve seen how we build everything using components. We’ve even isolated our components by placing them in their own folders inside the solution. We’ll go through some examples that show how we style each of our components.

Setup

The following is a snippet of the folder hierarchy currently in place.

  • webparts
    • components
      • EventHub
        • EventHub.tsx
        • IEventHubProps.ts
      • EventInfo
        • EventInfo.tsx
        • IEventInfoState.ts

SPFx is setup to make use of SCSS files that get bundled. When you want to style a component, create an scss file in the same directory as your component and follow the following format: “<componentName>.module.scss“

  • webparts
    • components
      • EventHub
        • EventHub.module.scss
        • EventHub.tsx
        • IEventHubProps.ts
      • EventInfo
        • EventInfo.module.scss
        • EventInfo.tsx
        • IEventInfoState.ts

I won’t go in depth on how this solution is styled here. I’m going to update the css in this solution over the course of these posts. Microsoft has some good material on working with css that you can reference as needed. Here’s a sample of the css used for the EventInfo component.

.EventInfo {
    display: flex;
    flex-flow: row;
    padding: 5px;
    justify-content: space-between;
    
    img {
        max-width: 450px;
        height: 250px;
        border-radius: 5px;
        border: 1px solid #ccc;
        box-shadow: 1px 2px;
        margin: 0px 10px;
    }

    .Details {
        padding: 0px, 15px;

        div {
            margin: 5px 0px;
        }
    }
}

Once you have your .scss defined, you’ll need to import it into your solution. When the solution gets packaged, it’s exported as styles so when I want to import the EventInfo.module.scss into my component, I’ll use the following:

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

Then, when it’s time to apply a style to your component you’ll simply reference it with {styles.className}. In the example, I have 2 divs. The container div is using “styles.EventInfo” which uses the Flex display, as seen above, and some padding. The inner div uses “styles.Details” which is just applying some padding/margins.

public render(): React.ReactElement<any> {
        return (
            <div className={styles.EventInfo}>
                <img src="https://secure.meetupstatic.com/photos/event/8/c/e/0/600_466836064.jpeg" alt="test" />
                <div className={styles.Details}>
                    <h2>{this.state.event.name}</h2>
                    <div>{this.state.event.location}</div>
                    <div>{'Organizers: ' + this.state.event.organizers.join(', ')}</div>
                    <div>{this.state.event.numOfMembers + ' members'}</div>
                </div>
            </div>
        );
    }

Conclusion

That’s it. Like I said, I wasn’t going to go to deep into it but if you’re getting started, that’s square one and the reference provided above can help fill in the blanks as you hit the occasional snag. In the next post, we’re going to see how we can use React-Redux to centralize our app state. This app is small and doesn’t require redux but we’ll go through a simple example.