Responsive variants take precedence over inline sx styles

Issue

Works as intended. DripText gets the styles fonts-size: 2px:

const theme = {
  text: {
    primary: {
      fontSize: 40,
    },
  },
}

...

<DripText variant="primary" sx={{ fontSize: 2 }}>
    joi
</DripText>

Doesn’t work as intended. DripText maintains the responsive styles e.i 40px, 50px, 60px:

const theme = {
  text: {
    primary: {
      fontSize: [40, 50, 60],
    },
  },
}

...

<DripText variant="primary" sx={{ fontSize: 2 }}>
    joi
</DripText>

Other notes

• When inline sx fontSize is changed to a string value e.i "2px" I get the same behavior.
• Reproduced on example app and in my own applications

[nandorojo]

In terms of order, precedence should take place based on each item in the array. So a responsive value from superStyle should override any style for the same style key before it. It looks like this is just checking if a non-responsive value already exists for a given key, and if it does, use that. I believe this would mean that we wouldn’t be able to override theme values with any responsive style props.

I’ll think this one over as well.

The main question: how do we get styles to cascade in order from top to bottom of styleArray, where each style overwrites the previous one, and where we only sometimes have a responsive array?

[nandorojo]

Closing since there hasn’t been activity here in a while