Question 225473 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to move sx= inside styles.scss?

Would you help me in How to move sx={{}} to styles.scss in React.
I have ErrorState and it appears in the middle of the page. However, i want to have styling in a separate file but once I moved, the styling is no longer works.

const ErrorState=({width})=>{
  const{t}=useTranslation();
return(
  <>
   <divdata-testid="payment-cards-container-id"/>
<Box
    data-testid="errorState"
    width={width}
    sx={{
         display:'grid',
         placeItems:'center',
         minheight:'100vh'
       }}
 >
    <Box>
        <ErrorIcon/>
        <Typography
              variant="body-copy-medium"
              style={{marginTop:20}}
        >
    </Typography>
    <Button
          data-testid="refreshButton"
          style={{marginTop:20,width:'fit-content'}}
          onClick={()=>window.location.reload()}
    </Button>
    </Box>
    </Box>
    </>
   );
};

I move sx = {{}} to styles.scss

Inside styles.scss:
I have

. Error-state {

    .Error-state{
             display: grid;
             Place-items: center;
             Min-heights: 100vh;}

Then I have className=“Error-state
Inside the <Box> but the ErrorState no longer appear in the middle of the page like when I have sx= directly in the file.

Tags:

2

Answers


  1. 0

    you need to import the index.scss file from its right location into the component like this

    import './styles.scss';

    After that add the classname .Error-state in Box component like this

    <Box data-testid="errorState" width={width} className="Error-state">
    Login or Signup to reply.
  2. 0

    Check this out…
    Here minimizing the code..(Your can add up yours here);
    Create first scss file…

    style.scss file

    .Error-state {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

    Then compile it usnig a scss compiler

    (Assuming your compiled css file is on the same directory)

    import './temp.css'

function App() {
  const ErrorState = ({ width }) => {
  //const { t } = useTranslation();
  }
  return (
    <>
          <div data-testid="payment-cards-container-id" />
          <div
            data-testid="errorState"
            style={{
              display: 'grid',
              placeItems: 'center',
              minheight: '100vh'
            }}
            className="Error-state"
          >
            YOUR THINGS
          </ div>
        </>
      );
    }

    export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search