Component Styles Aren't Showing

Codux uses boards to mock your project's components in isolation. This total isolation gives developers, designers, QA, PM, and all other product stakeholders the capacity to focus on, and perfect each component individually.
There are some challenges that arise when taking components out of the context of the full application. For example, sometimes, some (or all) of a component's styles might be missing. This can happen for several reasons, but in most cases, it is due to a stylesheet that loads in the full app context but isn't there when the component renders in isolation on a board.
This article covers the most common ways to include required stylesheets in boards so that all your component styles are present even in isolation, namely by importing stylesheets in boards and adding setup files.

Importing Stylesheets in Boards 

Style loader configuration comes from Webpack, so stylesheets imported in a board file work. As an example, take a look at the board file below: 
1
2
3
4
5
6
7
8
import { createBoard } from "@wixc3/react-board";
import { AppProductItem } from "../../../src/components/app-product-item/app-product-item";
export default createBoard({
 name: "Product Not In Cart",
 Board: () => {
   return (
     <AppProductItem
     //…
Here's what the component file looks like:
1
2
3
4
5
6
7
8
9
import React from 'react';
import { classes, style } from './product-item.st.css';
//...
export const AppProductItem = React.memo<AppProductItemProps>((props) => {
    const {
        productId,
        productTitle,
        modelName,
  //…
Any styles defined in product-item.st.css would ideally apply when the board renders. For this to happen, be sure to import the stylesheet in the board file like this:
1
2
3
4
5
6
7
8
9
10
import { createBoard } from "@wixc3/react-board";
import { AppProductItem } from "../../../src/components/app-product-item/app-product-item";
// this is where we import an additional stylesheet
import '../../extra-styles.st.css';
export default createBoard({
 name: "Product Not In Cart",
 Board: () => {
   return (
     <AppProductItem
     //…

Board Global Setup 

If there's a common setup that every board in your project requires (like loading a theme stylesheet), you might consider using the boardGlobalSetup configuration key. Refer here for more information.
IN THIS ARTICLE
Next article