Search code examples
reactjsstyled-components

How can i have a list of suggestions of css properties in jsx file using styled components

I'm using the styled-components library to style my app. the problem that I got is when I've created a Container for example and I want to insert CSS inside it when I type font, it does not give me the properties list to choose from as I usually have in CSS (font-size,font-weight...), I should write all CSS properties by hands.

<-- app component-->

import styled from 'styled-components';


//styled Components

const AppContainer = styled.div`
    CSS HERE
`;

function App() {
  return (
    <AppContainer>
      <h1>Hello Gallery</h1>
    </AppContainer>
  );
}

export default App;

Should I install a VS extension to activate this option in my jsx file?

Solution

  • you can try using https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components for the autosuggesting and autocompletion of the styles.