Styling Your Component

Importing CSS

Because we configured Rollup previously with the ability to import and bundle CSS, keeping styling encapsulated is easy. Create a file MyComponent.css in the project root, and add the following CSS code:

.my-component {
  font-size: 40px;
}

You can then add an import line to the top of the MyComponent.tsx file:

import './MyComponent.css';

This lets Rollup know that it will need to bundle that CSS file (MyComponent.css) into the final single-file CSS output (MyInstrument.css). When you build your project with npm run build, you should now also see the configured MyInstrument.css file in the build folder alongside your MyInstrument.js compiled JS file. You can now copy this file to the appropriate location in your MSFS package sources, alongside the HTML file.

Once the MSFS package has been rebuilt and re-synced, you should now see your new styling applied to the Hello World! text within your component on your panel.