Javascript 样式化组件只向自定义组件传递一些值

嗨，我正在尝试根据按钮类型配置按钮的颜色，这将被置于模式中。在这种情况下，“成功”或“危险”：

从“React”导入React；
从“样式化组件”导入样式化；
const ButtonStyled=styled.button`
背景色：${（道具）=>
props.btnType==“成功”？“绿色”：“红色”}；
边界：无；
颜色：白色；
大纲：无；
光标：指针；
字体：普通400；
填充：0.5rem 0；
保证金：0.5雷姆1雷姆；
字体大小：粗体；
左边距：0；
左侧填充：0；
`;
常量按钮=（道具）=>{
console.log（props.btnType）；
返回(
{props.children}
);
};
导出默认按钮；

这是我按下按钮的地方：

import React from "react";
import Button from "../../UI/Button/Button";

const OrderSummary = (props) => {
    return (
        <div>
            <Button btnType="Danger" clicked={props.cancelPurchase}>
                Cancel
            </Button>
            <Button btnType="Success" clicked={props.continuePurchase}>
                Continue
            </Button>
        </div>
    );
};

export default OrderSummary;

从“React”导入React；
从“../../UI/Button/Button”导入按钮；
const OrderSummary=（道具）=>{
返回(
取消
继续
);
};
导出默认订单摘要；

以下是调用订单摘要的位置：

import React, { useState } from "react";
import Modal from "../../components/UI/Modal/Modal";
import OrderSummary from "../../components/Burger/OrderSummary/OrderSummary";

const INGREDIENT_PRICES = {
    salad: 0.5,
    cheese: 0.4,
    meat: 1.3,
    bacon: 0.7,
};

const BurgerBuilder = () => {
    const [ingredients, setIngredients] = useState({
        salad: 0,
        bacon: 0,
        cheese: 0,
        meat: 0,
    });

    const [totalPrice, setTotalPrice] = useState(4);

    const [purchasing, setPurchasing] = useState(false);

    const purchaseCancelHandler = () => {
        setPurchasing(false);
    };

    const purchaseContinueHandler = () => {
        alert("continue");
    };

    return (
        <div>
            <Modal show={purchasing} modalClosed={purchaseCancelHandler}>
                <OrderSummary
                    continuePurchase={purchaseContinueHandler}
                    cancelPurchase={purchaseCancelHandler}
                    ingredients={ingredients}
                    price={totalPrice.toFixed(2)}
                />
            </Modal>
        </div>
    );
};

export default BurgerBuilder;

import React，{useState}来自“React”；
从“../../components/UI/Modal/Modal”导入模态；
从“../../components/Burger/OrderSummary/OrderSummary”导入OrderSummary；
常量成分价格={
沙拉：0.5，
奶酪：0.4，
肉类：1.3，
培根：0.7，
};
常量生成器=（）=>{
常量[成分，设置成分]=使用状态({
沙拉：0，
培根：0，
奶酪：0，
肉类：0，
});
const[totalPrice，setTotalPrice]=使用状态（4）；
const[purchasing，setPurchasing]=使用状态（false）；
const purchaseCancelHandler=（）=>{
电子采购（假）；
};
const purchaseContinueHandler=（）=>{
警惕（“继续”）；
};
返回(
);
};
导出默认生成器；

下面是应用按钮的模式

import React from "react";
import styled from "styled-components";
import Backdrop from "../Backdrop/Backdrop";

const ModalWrapper = styled.div`
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
    background: #fff;
    justify-content: center;
    align-items: center;
    color: #000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    z-index: 500;
    border-radius: 10px;
    transition: all 0.3s ease-out;
    padding: 16px;
    left: 15%;
    top: 30%;

    @media (min-width: 600px) {
        width: 500px;
        left: calc(50% - 250px);
    }
`;

const ModalContent = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.8;
    color: #141414;
    p {
        margin-bottom: 1rem;
    }
    button {
        padding: 10px 24px;
        background: #141414;
        // color: #fff;
        border: none;
    }
`;

const Modal = (props) => {
    return (
        <div>
            <Backdrop show={props.show} clicked={props.modalClosed} />
            <ModalWrapper
                style={{
                    transform: props.show ? "translateY(0)" : "translateY(-100vh)",
                    opacity: props.show ? "1" : "0",
                }}
            >
                <ModalContent>{props.children}</ModalContent>
            </ModalWrapper>
        </div>
        // <ModalStyled>{props.children}</ModalStyled>
    );
};

export default Modal;

从“React”导入React；
从“样式化组件”导入样式化；
从“./背景/背景”导入背景；
const ModalWrapper=styled.div`
盒影：0 5px16px rgba（0,0,0,0.2）；
背景：#fff；
证明内容：中心；
对齐项目：居中；
颜色：#000；
显示：网格；
网格模板柱：1fr 1fr；
位置：固定；
z指数：500；
边界半径：10px；
过渡：所有0.3秒放松；
填充：16px；
左：15%；
最高：30%；
@介质（最小宽度：600px）{
宽度：500px；
左：计算（50%-250px）；
}
`;
const ModalContent=styled.div`
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
线高：1.8；
颜色：#141414；
p{
边缘底部：1rem；
}
钮扣{
填充：10px 24px；
背景：#141414；
//颜色：#fff；
边界：无；
}
`;
常量模态=（道具）=>{
返回(
{props.children}
//{props.children}
);
};
导出默认模式；

---

当我做了一些测试时，样式化组件模式内容中的值表示该内容中的按钮。因此，它会影响已设置样式的组件按钮样式的值。但是，如果我删除了模式内容中按钮的值，则不会接受ButtonStyled中颜色的值。有人知道原因吗？

在

ModalContent

中定义的按钮样式正在覆盖您在

按钮组件中定义的按钮样式

button {
    padding: 10px 24px;
    background: #141414; // <-- overrides button background color
    border: none;
}

您有关于该问题的更多详细信息吗？我在Codesandbox中尝试了你的代码，它对我来说运行正常哦，对不起，我发现了问题。这是因为我用一个模态包装器包装它，因此它受到它的影响。我的模式内容包装器有以下值：const ModalContent=styled.div`display:flex；弯曲方向：立柱；证明内容：中心；对齐项目：居中；线高：1.8；颜色：#141414；p{margin bottom:1rem；}按钮{填充：10px 24px；背景：#141414；//颜色：#fff；边框：无；}`；但是，按钮组件不应该在模式内容包装器内的按钮中输入模式输出值吗？让我更新问题，那么您是否解决了这个问题，或者仍然存在一些问题？我看不出在模式中渲染按钮的位置。请包括所有相关代码及其使用方法，以便能够重现该问题。模态内容包装器组件设置
p
和
按钮
元素的样式是否有原因？
button {
    padding: 10px 24px;
    background: #141414; // <-- overrides button background color
    border: none;
}

const ButtonStyled = styled.button`
  && {
    background-color: ${(props) =>
      props.btnType === "Success" ? "green" : "red"};
  }
  border: none;
  color: white;
  outline: none;
  cursor: pointer;
  font: Regular 400;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  font-weight: bold;
  margin-left: 0;
  padding-left: 0;
`;