wrong sequence when generate storybook styles

[Jasenpan1987]

we are using tss-react to work with storybook,

this is the preview.js file

import React from "react";
import { ThemeProvider } from "@mui/material/styles";
import { ThemeProvider as Emotion10ThemeProvider } from "emotion-theming";
import { Themes } from "../src/theme";
import { CssBaseline } from "@mui/material";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/i
    }
  },
  docs: {
    source: { type: "dynamic", excludeDecorators: true },
    inlineStories: false,
    iframeHeight: "700px"
  }
};

const withThemeProvider = (Story, context) => {
  return (
    <Emotion10ThemeProvider theme={Themes.Default}>
      <ThemeProvider theme={Themes.Default}>
        <CssBaseline />
        <Story {...context} />
      </ThemeProvider>
    </Emotion10ThemeProvider>
  );
};

export const decorators = [withThemeProvider];

in one of the component I override the chip style like this

const useStyles = makeStyles()(
  ({ palette }) => ({
    root: {
      border: "0.1rem solid",
      textAlign: "center",
      padding: "0 0.5rem",
      borderRadius: "0.2rem",
      whiteSpace: "nowrap",
      borderColor: "#ff0000",
      backgroundColor: "#ffffff",
      color: "#ff0000"
    }
  })
);

const CustomChip = ({
  text,
}: {
  text: string;
}) => {
  const { classes, cx } = useStyles();

  return (
    <Typography variant="body2" className={classes.root}>
      {text}
    </Typography>
  );
};

when it builds I got two css classes for that element:

.css-1vjo9lu {
    margin: 0px;
    font-size: 1.4rem;
    line-height: 1.71;
    color: rgb(38, 50, 56);
    letter-spacing: normal;
    font-weight: 400;
    font-family: "Cera Pro", sans-serif;
}

.tss-1ev1aua {
    border: 0.1rem
    solid rgb(0, 104, 200);
    text-align: center;
    padding: 0px 0.5rem;
    border-radius: 0.2rem;
    white-space: nowrap;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 104, 200);
}

The first css class was the mui typography override and the second one was the makestyle override in the component.
The issue is the color should be the one in makestyle but it takes the typography color.

Please let me know where we did it wrong or this is a bug in storybook or tss-react.

Many thanks.

[garronej]

Hi @Jasenpan1987,

Have you see this note in the REAMDE:

[garronej]

There is a working setup here if it can help.

[Jasenpan1987]

Thanks a lot @garronej
we follow the setup step by step, and it works

[garronej]

Storybook is often a pain to get working properly