样式化组件仅将一些值传递给自定义组件答案

【问题标题】：Styled Component only pass some value to custom component样式化组件仅将一些值传递给自定义组件
【发布时间】：2020-10-26 03:01:12
【问题描述】：

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

import React from "react";
import styled from "styled-components";

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;
`;

const Button = (props) => {
    console.log(props.btnType);
    return (
        <ButtonStyled btnType={props.btnType} onClick={props.clicked}>
            {props.children}
        </ButtonStyled>
    );
};

export default Button;

这里是我调用按钮的地方：

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;

这里是调用订单摘要的地方：

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 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;

当我进行一些测试时，样式化组件 Modal Content 中的值将是该内容中的按钮状态。因此，它影响了样式化组件 Button Styled 的值。但是，如果我删除了 Modal Content 中 button 的值，则 ButtonStyled 中的颜色值将不会被接受。有谁碰巧知道为什么？

【问题讨论】：

你有更多关于这个问题的细节吗？我在 Codesandbox 中尝试了你的代码，它对我来说没问题
抱歉，我发现了问题。这是因为我将它包裹在模态包装器中，因此它受到了它的影响。我的模态内容包装器具有以下值： const ModalContent = styled.div ` display: flex;弹性方向：列；证明内容：中心；对齐项目：居中；行高：1.8；颜色：#141414； p { 边距底部：1rem; } 按钮 { 填充：10px 24px;背景：#141414； // 颜色：#fff;边框：无； } `;
但是，Button 组件不应该将模态输出值放在模态内容包装器内的按钮吗？
让我更新问题
那么你解决了这个问题还是还有一些问题？我看不到您在模式中呈现按钮的位置。请包括所有相关代码及其使用方式，以便能够重现该问题。您的模态内容包装器组件为p 和button 元素设置样式是否有原因？

标签： javascript css reactjs styled-components

【解决方案1】：

ModalContent 中定义的按钮样式将覆盖您在 Button 组件中定义的按钮样式。

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

对于 CSS，最具体的选择器将是设置样式的选择器，我怀疑 ModalContent 样式组件的计算样式结果对于 button 元素的选择器比来自 ButtonStyled 的选择器更具体。

您可以做的是提高 ButtonStyled 背景颜色的选择器特异性。

Pseudoelements, pseudoselectors, and nesting，最后一节。

最后，与号可用于增加组件规则；如果您正在处理可能存在的混合样式组件和香草 CSS 环境风格冲突

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;
`;

【讨论】：