Reactjs 样式化组件：使用<；时共享样式化组件；美国名称/>；命名约定

我喜欢使用样式化组件命名约定，在这里您可以

…

，但是我遇到了一个问题，我需要导入一个组件的样式，然后还要导入一些共享样式化组件，但我无法再次将其导入

以下是我的文件夹结构：

src
    ├── api
    │   ├── verb-api.js
    │   └── list-api.js
    ├── axios
    │   └── index.js
    ├── components
    │   └── ListsCard
    │       ├── SubListsCard
    │       │   ├── AnalyticsPage.js
    │       │   ├── VerbsPage.js
    │       │   ├── index.js
    │       │   └── styles.js
    │       ├── index.js
    │       └── styles.js
    ├── hooks
    │   ├── mutations
    │   │   ├── useListMutation
    │   │   └── useVerbMutation
    │   ├── useClickOutside
    │   └── useFocusInput
    ├── routes
    │   ├── Home.js
    │   ├── index.css
    │   └── index.js
    └── index.js

我需要为我的子ListsCard组件使用

SubListsCard/styles.js

和

ListsCard/styles.js

中的样式。（我可能会从中导入一个名为shared的文件夹，而不是从

ListsCard/styles.js

导入）

我的解决方案是将共享的样式化组件导入

子列表scard/styles.js

并将其导出：

import styled from "styled-components"
import {SomeComponent, OtherComponent} from "../styles"

export {SomeComponent, OtherComponent}; 

const Name = styled.div`

    ...

`;

有没有更好的办法

---

提前感谢：）

从我迄今为止遇到的所有解决方案中，我喜欢在上提到的方法

Header.js

import { Component } from "react";
import { Navbar } from "react-bootstrap";
import { $Header } from "./style";

class Header extends Component {
    render() {
        return (
            <$Header>
                <Navbar>
                </Navbar>
            </$Header>
        )
    }
}

export default Header;

import styled from 'styled-components'; 

export const $Header = styled.header`
    z-index: 1;
`

---

我不确定我是否理解这个问题。你有什么错误吗？你为什么不直接导入你需要的东西，并用

import{SomeComponent as foo}

或类似的方法将其别名？我的解决方案是可行的，但我想知道是否有人用另一种方法来实现它，我认为S命名约定在使用样式化组件时非常常见，所以我想知道如果需要从两个不同的地方导入样式，人们会怎么做。也许这是一个愚蠢的问题。我想说的是，我甚至不明白您的解决方案解决了什么问题。我确实尝试过这种方法，但它确实让我恼火，因为对于我拥有的每个样式化组件，我都会在Eslint中得到警告，它不符合react命名标准、PascalCase或尖叫蛇案例。不管怎样，你可以把它们关掉吗？我会将您的答案标记为已接受，但我仍然愿意接受任何其他建议。是的，您可以通过提及

中的规则来关闭警告。eslintrc