Skip to main content

The problem with the global boostrap styles

  • Can not efficiently restyle to MUI v5 while bootstrap styles are polluting the global scope. In effect, we have two design systems which are "fighting" against each other, which is just absurd.
  • Can't just "switch off" bootstrap styles as the codepanel content depends on it, and other pages too to a lesser degree.
  • Can't properly isolate bootstrap styles to specific pages as that would involve nesting them inside a page selector, which can change their behaviour and priority in subtle ways (just the way Cascading Stylesheets work)

The solution​

Bootstrap is completely removed in the v2 branch n, so if upgrading features to mui v5 on the n-legacy branch, you need to make sure the styles won't break or behave differently without bootstrap by commenting out the line import '../legacy.scss'; in https://github.com/C4CNYC/CT-React-Live/blob/n-legacy/src/pages/_app.tsx and checking the results