Altering the CSS of a component about react95

[ggdaltoso]

Hi, @dlomax64

I was trying to reproduce your issue and ended up with this CodeSandbox solution but it doesn't seem to solve your main problem.

In other words, you can easily extend a component style using styled-components API

import styled from "styled-components";
import { Modal } from "@react95/core";

const ExtendedModal = styled(Modal)`
  z-index: 10;
`;

But extending a component wouldn't seem to be a solution for your case.

Our Modal has its active state handled by its own Context + its own state.

The only way I can see you could achieve what you want would be by creating a new theme and changing the Modal zIndex to whichever you want. But, there is no such API for doing this.

Today, you can only choose one for a bunch of available themes. You can't build your own.

We could create a task for it. If you want to.

Would you like to contribute to it?

Although, if you could provide more details of what are you facing I would be glad to help you.

[sylviesworld]

My specific problem is that I have an animated svg on the background that the modal falls behind whenever it goes out of focus. Whenever I try to alter the modals z-index, the in-focus modal won't always appear above out of focus windows. The problem with the method you posted is that it makes the z-index for the modal 10 whether it's in focus or not.

I wonder if you could make it to where you can pass a z-index (for it's in and out of focus states) to the modal like you do with height and width. Or perhaps have an option that makes the out of focus modal's z-index always be the in-focus z-index - 1.

I've never modified a package before, so if I were to play around with that would modifying node_modules/@react95/core/@types/Modal/Modal.d.ts be how I do it?

Thanks for the help

[sylviesworld]

I feel real silly right now. I finally determined why the windows kept falling behind my svg even though they had the same z-index. I was rendering the windows before the svg. Simply switching the order that my elements get rendered fixed it. Thanks for trying to help!

[ggdaltoso]

I'm glad to know you could solve this!

But feel free to contribute with React95. I would love to discuss and help you with an issue or feature.

Thanks, @dlomax64