Question 209777 in Html Question posted in
Some basic documentation can be found here.

Html – How to use font-style and font-family with styled-components

I have set the font-family in GlobalStyle. However I want to use another font-family and additional another font-style in one component. It somehow does not work to set it like below.

const GlobalStyle = createGlobalStyle`
  body {
    font-family: Montserrat;
    ...
  }
`;

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <BrowserRouter>
        ...
      </BrowserRouter>
    </ThemeProvider>
  );
};

and

const Text = styled.p`
  font-style: "italic";
  font-family: "Arial";
  ...
`;

The Result is the following

<p font-style="italic" font-family="Arial" class="sc-gtsrHT imMzcY">

But actually the font is still Montserrat and the style normal.
How can I overwrite global style?

Tags:

3

Answers


  1. 0

    In JSX, kebab case for attributes is forbidden.

    You should instead use camel case

    const Text = styled.p`
  fontStyle: "italic";
  fontFamily: "Arial";
  ...
`;

    Also, the word class is reserved (because JSX is a javascript format with extra features for template rendering, but it is still javascript). To add a css class to an html element, the word to use is className

    Login or Signup to reply.
  2. 0

    I think the problem is that you are using the "p" tag instead of the "Text" tag you created, you need to use <Text> <Text/> instead <p> </p>.

    Login or Signup to reply.
  3. 0

    should not be an italic string
    CodeSandbox

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search