Question

我喜欢在使用<S.SomeName>...</S.SomeName>的地方使用样式化的组件命名约定，但是遇到一个问题，我需要导入一个组件的样式，然后还要导入一些共享的样式化的组件，但是我不能导入它再次为S。

这是我的文件夹结构：

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

我的SubListsCard组件需要使用SubListsCard/styles.js和ListsCard/styles.js中的样式。（我可以从中创建一个名为shared的文件夹，而不是从ListsCard/styles.js导入）。

“我的解决方案”只是将共享样式的组件导入SubListsCard/styles.js并将其导出：

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

export {SomeComponent, OtherComponent}; 

const Name = styled.div`

    ...

`;

还有更好的方法吗？

预先感谢：）

Answer 1

从目前为止我遇到的所有解决方案中，我都喜欢https://zzzzbov.com/blag/styled-components-naming-convention中提到的方法。

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;

style.js

import styled from 'styled-components'; 

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

样式化的组件：使用<S.Name />命名约定时共享的样式化组件

1 个答案: