Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't easily override locally scoped css #1

Open
jlsnow301 opened this issue Jul 15, 2024 · 2 comments
Open

Can't easily override locally scoped css #1

jlsnow301 opened this issue Jul 15, 2024 · 2 comments

Comments

@jlsnow301
Copy link
Member

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
Copy link
Member

stylemistake commented Jul 15, 2024

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
Copy link
Collaborator

ZeWaka commented Aug 12, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants