Problem using styled-components with my calculator project

JavaScript
1

Tell us what’s happening:
I’m trying to get familiar with using styled-components. I’ve tried to use it on my current calculator project. But, it’s not applying styles to my components. for example I have this Calculator components with its styled-component (Calculotor.style) in the same folder (calculator). here is the Calculator component.
here is my github repo for more information:
https://github.com/redapy/calculator

Your code so far
here is the Calculator component

import React, { useRef, useState } from 'react';
import ButtonsList from '../buttons/ButtonsList';
import Display from '../display/Display';
import { Warapper } from './Calculotor.style';


const Calculator = () => {
    
    const [display, setDisplay] = useState('0');
    const [formula, setFormula] = useState('');
    const lastPressed = useRef('');
    const endsWithOperator = /[-+*/]$/;

    (some code here for my logic)


    return ( 
        <Warapper >
            <Display display={display} formula={formula} />
            <ButtonsList buttons={buttons} handleInput={handleInput}/>
        </Warapper>      
     );
}

and here is my Calculotor.style for just centering my components:

import styled from "styled-components";

export const Warapper = styled.div`
max-width: 50%;
margin: O auto;
`

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36

Challenge: Build a JavaScript Calculator

Link to the challenge:

2

It’s working for me but you have a typo.

margin: O auto;

O should be a zero 0

Edit: I also expect the GlobalStyle isn’t doing what you think it is. Check the docs

3

Thank you I haven’t notice the typo. It’s working now

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.