Config stylelint in react tsx using MUI

Question

I got a project using:

• mui
• typescript
• react

I want to configure stylelint to check for HEX colors used in tsx files

current config:

"stylelint": {
  "rules": {
    "color-no-hex": true
  }
}

running it: npx stylelint "**/*.tsx"

this blows up after finding imports

src/components/Page.tsx
 2:10  ✖  Unknown word  CssSyntaxError // this is an import

this is an example of what I want linted:

<Typography color="#FFFFFF99">text</Typography>
<Box sx={{bgcolor: "#FFFFFF"}}/>

So the question/s:

• Can this be done with stylelint, how to config?
• Can this be done with another linter, how to config?