Export styles as CSS so the package could be used in non-tailwind projects

[jakeprins]

[michael-pont]

Hi @jakeprins I am trying to use react-vault in a SPA react application using MUI.
Unfortunately, I am having a hard time scoping the styles when I import '@apideck/react-vault/dist/styles.css'.
All the MUI components are now being affected by the styles in the tailwind file since they share the same selectors, e.g., button, etc.
Ideally I only need the Vault component styled from Apideck since it is a modal that opens up.
Do you have any recommendations how I might solve this? Is there any timeline/priority on this ticket?

Best
Michael

[jakeprins]

Hey @michael-pont,

Are you using the latest version of React Vault? I believe the exported CSS should now be scoped (apideck-libraries/vault-core@2a889d5)

If you have the latest version installed and it's still causing issues let me know so I will investigate it. Maybe it's styling from the component library that should also be scoped.

[michael-pont]

Yes I am using version 0.2.10.
Here is my component code below

import { Vault } from '@apideck/react-vault';
import { useState } from 'react';
import { createVaultSession } from '../../api/queries';
import { Typography, Button } from '@mui/material';
import { useMutation } from 'react-query';
import { Box } from '@mui/system';
import { useUserStore } from '../../hooks/useUserStore';
import '@apideck/react-vault/dist/styles.css';
//import { Button } from '@apideck/components';
//import './ApideckVault.module.css';

const ApideckVault = () => {
  const userId = useUserStore((state) => state.getUserId());

  const [token, setToken] = useState('');
  const [openVault, setOpenVault] = useState(false);
  const [vaultLoading, setVaultLoading] = useState(false);
  const [vaultError, setVaultError] = useState('');
  const mutation = useMutation(createVaultSession);

  const createSession = () => {
    setVaultLoading(true);
    setVaultError('');
    mutation.mutate(userId, {
      onSuccess: (data) => {
        setToken(data.session_token);
      },
      onError: (error) => {
        console.error(error);
        setVaultError('Error creating session');
      },
      onSettled: () => {
        setVaultLoading(false);
      },
    });
  };

  const toggleVault = () => {
    setOpenVault(!openVault);
  };
  return (
    <Box sx={{ display: 'flex' }}>
      <Button
        onClick={token ? toggleVault : createSession}
      >
        Open Vault
      </Button>
      {vaultError && <Typography>{vaultError}</Typography>}
      <Vault
        token={token}
        open={openVault}
        onClose={toggleVault}
        unifiedApi="crm"
        serviceId="salesforce"
      />
    </Box>
  );
};

export default ApideckVault;

I believe for my particular setup css modules could work as a solution where I target the class name of the vault component.
https://www.gatsbyjs.com/docs/how-to/styling/css-modules/

[jakeprins]

I see.

What's anooying is that the preflight styles and styles coming from the @tailwindcss/forms plugin are not being scoped under #react-vault.

These are however very basic styles and should always be easily overwritten. Are you sure your styles are being loaded after the React Vault styles? Sinces their is no class or anything on them it should always be overwritten by your application styles.

I published a new version (0.2.11). Could you try installing that one and importing the @apideck/react-vault/dist/styles.css before any other styles?

[michael-pont]

Hi Jake,

Thanks for your help. I will try it out.
I am currently using the following from MUI which affects the css injection order, so I will have to play around with it.