小编Cor*_*ere的帖子

我最近将正在处理的内部组件库转换为样式化组件。该组件库在package.json中将Styled Components列出为peerDep和devDep。从那里，我将样式化组件导入到需要样式化的每个组件中。到那时为止，所有工作都很好。

我有一个Create React App（CRA）应用程序，该应用程序也将样式化的组件导入为常规依赖项。我需要它能够为该特定项目构建一次性组件。但是，我还需要能够导入我的组件库，以为此新的基于CRA的应用程序构建核心组件。

现在这是我的问题：我正在通过直接链接到package.json（file:../component-lib）中的组件库，在此CRA应用程序中测试我最近转换的基于样式组件的组件库。我已经安装了所有部门，从组件库中导入了组件，并在CRA项目中构建了一个新的项目特定的样式化组件，然后在本地运行它，只是看到了相同的错误：“看来，有多个'styled-组件在此应用程序中初始化。这可能会导致动态样式无法正确呈现，在补液过程中会发生错误，并使您的应用程序变大而没有充分的理由。” 我已经阅读了文档的这一部分，并学会了不使用npm链接并将SC用作我的组件库中的peerDep和devDep。

我相信这个问题不允许我访问组件库中传递给自定义ThemeProvider的主题道具，因为我正在CRA项目中运行多个实例？

这个问题肯定是由于我缺乏依赖管理知识。我只是想知道是否还有其他人遇到过类似的问题，或者我应该怎么做才能避免样式化合作伙伴重复出现？

组件库索引

export { default as Button } from "./components/Button";

export {
  default as CustomThemeProvider
} from "./components/utils/CustomThemeProvider";

组件库package.json

"scripts": {
    "build": "nwb build-react-component --copy-files",
    "clean": "nwb clean-module && npm clean-demo",
    "start": "nwb serve-react-demo",
    "lint": "eslint src/**",
    "test": "nwb test-react",
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build",
    "test:coverage": "nwb test-react --coverage",
    "test:watch": "nwb test-react --server",
    "publish": "npm run build && npm publish"
},
"dependencies": {
    "@rebass/grid": "^6.0.0-4",
    "prop-types": "^15.6.0",
    "react-portal": "^4.1.2" …

Box我正在尝试在新项目上制作通用的反应组件。这将是所有其他组件的基础。我使用 styled-system、emotion 以及最终的 theme-ui 来处理所有组件的主题和样式。

我的根Box组件如下所示：

import styled from '@emotion/styled';
import {
  compose,
  space,
  layout,
  flexbox,
  border,
  position,
  color,
  SpaceProps,
  ColorProps,
  LayoutProps,
  FlexboxProps,
  BorderProps,
  PositionProps,
} from 'styled-system';

export type BoxProps = SpaceProps &
  ColorProps &
  LayoutProps &
  FlexboxProps &
  BorderProps &
  PositionProps;

export const Box = styled.div<BoxProps>(
  {
    boxSizing: 'border-box',
    minWidth: 0,
  },
  compose(space, color, layout, flexbox, border, position)
);

我使用 styled-system 中的 styled 函数及其关联类型来创建一个接受空间、颜色、布局、flexbox、边框和位置属性的 Box 组件。

我收到的错误仅发生在color道具上。一旦我删除它，我就不会收到任何错误。

TS 错误为：

Type 'BoxProps' does not …

我正在尝试覆盖Woocommerce Stripe插件的输出HTML。我将如何去做？我已经阅读了一些有关动作钩子和过滤器的文章和文档，但我相信这些仅适用于Woocommerce插件，而不适用于Woo / Stripe扩展插件。如果解决方案是钩子或过滤器，那会是什么样？我可以修改核心文件或使用JS，但这根本不是真正可行的解决方案...

我要修改的文件位于：

插件/woocommerce-gateway-stripe/includes/class-wc-gateway-stripe.php

这是我要在该文件中修改的标记块：

/**
 * Payment form on checkout page
 */
public function payment_fields() {
    $checked = 1;
    ?>
    <fieldset>
        <?php
            if ( $this->description ) {
                echo wpautop( esc_html( $this->description ) );
            }
            if ( $this->saved_cards && is_user_logged_in() && ( $customer_id = get_user_meta( get_current_user_id(), '_stripe_customer_id', true ) ) && is_string( $customer_id ) && ( $cards = $this->get_saved_cards( $customer_id ) ) ) {
                ?>
                <p class="form-row form-row-wide">
                    <a class="button" style="float:right;" href="<?php echo apply_filters( 'wc_stripe_manage_saved_cards_url', get_permalink( get_option( 'woocommerce_myaccount_page_id' …

我已经按照最新的CSS Grid规范创建了一个网格布局,但我还没有完全熟悉它.我正在尝试创建以下布局,而无需为每个网格子项定义网格区域.

codepen

body {
  max-width: 1024px;
  margin: 10px auto;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "a a b" "a a c" "d e f";
}

.grid__thing {
  background-color: rebeccapurple;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} …