Блог

Я хочу реализовать опцию цвета в своих компонентах кнопок, чтобы использовать ее во всех моих глобальных компонентах, чтобы я мог динамически изменять текст и цвет

правильно ли это?

 import React from 'react';
import './Button.css';

const Button = ({text, BtnVersion1}) => {


    return (
        <a href="#" style={{color: {BtnVersion1}}} className="buy">{text}</a>
    )
}

export default Button;


<Button style={{color: "red"}} text="SHOP NOW" />
 

 Your component code seems to be fully correct. But when using your component you have to pass props this way:
<Button text={"SHOP NOW"} BtnVersion1={"red"} />
 

Именно здесь стилизованные компоненты могут быть очень полезны. Если вы объявляете «стиль» в компоненте, это встроенный стиль, который будет существовать только в этом экземпляре кнопки. Вы можете передать реквизит, скажем «btnColor», кнопке, которая используется компонентом стиля для изменения цвета. Смотреть ниже.

 import React from 'react';
import styled from 'styled-component';
import './Button.css';

const StyledButton = styled.a`
   background-color: ${props => props.btnColor ? props.btnColor : 'red'};
`

const Button = ({
   text, 
   btnColor
}) => {
    return (
        <StyledButton href="#" btnColor={btnColor} className="buy">{text}</StyledButton>
    )
}

export default Button;


<Button btnColor='red' text="SHOP NOW" />
 

Вы можете видеть выше в кнопке стиля, что если мы предоставим опору btnColor, а не будем использовать этот цвет, то по умолчанию будет «красный».

Для получения дополнительной информации о стилизованных компонентах — https://styled-components.com/

У вас может быть более «динамичный» способ сделать это (чтобы ваш экземпляр <Button> не менялся).:

 import React from 'react';
import './Button.css';

const Button = ({ text, style }) => {

    return (
        <a href="#" style={style} className="buy">{text}</a>
    )
}

export default Button;


<Button style={{ color: "red" }} text="SHOP NOW" />
 

Если вы хотите просто управлять цветом (или другими свойствами), вы можете сделать что-то вроде:

 import React from 'react';
import './Button.css';

const Button = ({ text, color }) => {

    return (
        <a href="#" style={{ color }} className="buy">{text}</a>
    )
}

export default Button;


<Button color="red" text="SHOP NOW" />
 

Возможно, вы захотите использовать свой компонент таким образом: преимущество здесь в том, что вы можете передать все свои пользовательские стили для каждой из ваших кнопок.

 const Button = ({text, style}) => {
  return (
     <a href="#" style={style} className="buy">{text}</a>
  );
};

ReactDOM.render(<Button style={{color: "red"}} text="SHOP NOW" />, document.querySelector("#root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="root">
  <!-- Your root container -->
</div> 

Не используйте тег привязки в качестве кнопки в react , если вы хотите узнать причину, прочитайте этот документ https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md

Я думаю , что лучший способ стилизовать кнопку-это использовать стилизованный компонент , я привел пример кода в этой песочнице, вы можете передавать реквизиты только для вещей, которые вы хотите изменить, например, для фона, если значение не задано, он примет цвет по умолчанию

попробовать это

код :

 import "./styles.css";
import styled from "styled-components";

const Button = styled.button`
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 16px;
  background: ${(props) => (props.background ? props.background : "#00D2AD")};
  transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  padding: 14px 24px;
  outline: none;
  text-align: center;
  display: inline-block;
  border: none;
  cursor: pointer;
  border-radius: 4px;
`;


export default function App() {
  return (
    <div className="App">
      <Button>Default Button </Button>
      <br />
      <br />
      <Button background={"gray"}>Custom Button</Button>
    </div>
  );
}