样式组件:使用 <S.Name/> 时共享样式组件命名约定 [英] styled components: shared styled components when using &lt;S.Name /&gt; naming convention

问题描述

我喜欢在您执行 ...</S.SomeName> 的地方使用样式化组件命名约定，但是我遇到了需要导入的问题一个组件的样式，然后还有一些共享样式的组件，但我无法再次将其导入为 S.

I like using the styled components naming convention where you do <S.SomeName>...</S.SomeName>, however I've encountered a problem where I need to import a component's styles and then some shared styled components as well but I can't import it as S again.

这是我的文件夹结构:

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/styles.js 和 ListsCard/styles.js 中的样式用于我的 SubListsCard 组件.(我可能会从该文件夹导入一个名为 shared 的文件夹，而不是从 ListsCard/styles.js 导入).

I need to use the styles from SubListsCard/styles.js and ListsCard/styles.js for my SubListsCard component. (I might make a folder called shared an import from that, instead of importing from ListsCard/styles.js).

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

My Solution was just import the shared styled components into the SubListsCard/styles.js and export it out:

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

export {SomeComponent, OtherComponent}; 

const Name = styled.div`

    ...

`;

有没有更好的方法来做到这一点?

is there any better way of doing this?

提前致谢:)

推荐答案

我喜欢 https://zzzzbov.com/blag/styled-components-naming-convention 来自我迄今为止遇到的所有解决方案.

I like the approach mentioned at https://zzzzbov.com/blag/styled-components-naming-convention from all the solutions that i have came across so far.

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/> 时共享样式组件命名约定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！