Custom css to theme key mappings

It would be nice to manually define css style props to theme keys/scales mappings.

Say for instance I wanted to map the outline css prop the the border scale, or perhaps a custom outline scale then I could do something like this in my theme object:

const myTheme = {
  bloop: {
    error: '1px solid tomato',
    success: '1px solid springgreen',
    info: '1px solid skyblue'
  },
  // customise theme spec here
  customSpec: {
    //  define in the form 'css style prop': 'theme key'
    'outline': 'bloop',
    // overwrite mappings
    'border': 'bloop'
  }
}

This would then work in the sx prop like so:

sx={{ outline: 'error' }}

Of course I could use functional values but it can be come a bit cumbersome.

I am suggesting this since I have many outline: theme => theme.borders.outline in my code but perhaps there are other cases where it could be useful, maybe opacities or transitions? I’m happy to submit a PR for this if need be.

[cour64]

Fair enough, I will close this issue to remove clutter.

I was mainly suggesting this for the case of transitions and outlines anyway, once the typescript conversion is done I might add a PR for those

[jxnblk]

While we do not plan on making the sx prop customizable, properties like transition and outline could (should probably) be added to the implementation