# CSS in JS - unable to import import "./ListGroup.css";

**URL:** <https://forum.codewithmosh.com/t/css-in-js-unable-to-import-import-listgroup-css/26627>\
**Category:** Uncategorized\
**Created:** [May 12, 2024, 11:01pm UTC](https://forum.codewithmosh.com/t/css-in-js-unable-to-import-import-listgroup-css/26627 "2024-05-12T23:01:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbilaliqbal](https://avatars.discourse-cdn.com/v4/letter/m/7bcc69/32.png) [@mbilaliqbal](https://forum.codewithmosh.com/u/mbilaliqbal)\
**Post date:** [May 12, 2024, 11:01pm UTC](https://forum.codewithmosh.com/t/css-in-js-unable-to-import-import-listgroup-css/26627/1 "2024-05-12T23:01:33Z")

</div>

Hello,

I am unable to import ListGroup.css.

Can someone please help.

Below is my code:

import { useState } from “react”;  
import “./ListGroup.css”;  
import styled from “styled-components”;

const List = styled.ul` list-style: none; padding: 0;`;

interface ListItemProps {  
active: boolean;  
}

const ListItem = styled.li` padding: 5px 0; background: ${(props) => (props.active ? "blue" : "none")};`;

interface Props {  
items: string;  
heading: string;  
onSelectItem: (item: string) =\> void;  
}  
function ListGroup({ items, heading, onSelectItem }: Props) {  
const [selectedIndex, setSelectedIndex] = useState(0);

return (  
\<\>

# {heading}

```
  {items.length === 0 && <p>No item found</p>}
  <List className="list-group">
    {items.map((item, index) => (
      <ListItem
        active={index === selectedIndex}
        key={item}
        onClick={() => {
          setSelectedIndex(index);
          onSelectItem(item);
        }}
      >
        {item}
      </ListItem>
    ))}
  </List>
</>

```

);  
}

export default ListGroup;

 ![Screen Shot 2024-05-12 at 6.55.51 PM](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/7/73ecdf219a5177e8cfb27572f241c96a6f31d9e8.png)

Thanks,  
Bilal

---

<div class="post-metadata">

**Author:** ![lucidlear](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/lucidlear/32/5477_2.png) [@lucidlear](https://forum.codewithmosh.com/u/lucidlear)\
**Post date:** [May 13, 2024, 1:34am UTC](https://forum.codewithmosh.com/t/css-in-js-unable-to-import-import-listgroup-css/26627/2 "2024-05-13T01:34:39Z")

</div>

Hi are you sure the CSS file is in the current folder where the file is that is importing it? ie: the one above. Also double check the spelling and capitalization of the filename is exactly the same