tgstation / tgui-core

React component library and tools for TGUI.
https://www.npmjs.com/package/tgui-core
MIT License
7 stars 6 forks source link

Can't easily override locally scoped css #1

Open jlsnow301 opened 3 months ago

jlsnow301 commented 3 months ago

Some uis use custom css to select classes inside tgui components. For instance, the crewmanifest ui targets the title inside sections: https://github.com/tgstation/tgstation/blob/7da06f543dadfd4bb4d32ea441dc9842a969bdf8/tgui/packages/tgui/styles/interfaces/CrewManifest.scss#L17-L24

This doesn't seem to work when we're using (s)css modules, and after repeated attempts to fix this without fully understanding what's going on under the hood, I've come to the conclusion that we should simply name the classes uniquely and use regular css.

stylemistake commented 3 months ago

This example should've used a class named like CrewManifest__Section, which would be added by hand to the section instead of relying on css cascades.

Speaking of css modules, latest specs allow importing symbols from other css modules, so you can actually reference outside classes.

ZeWaka commented 2 months ago

One thing I've struggled with when porting to this is that it's extremely difficult to modify elements within a tgui-core component. So, the icon within a Button, or the Title portion of a Section. I ended up employing fairly fragile solutions like: IDComputer__DeptBox > div:first-child