Блог

Итак, я пытаюсь добавить элементы управления к своим компонентам сборника рассказов. У меня возникли проблемы с пониманием того, как изменить стиль css. Я настроил proptypes, чтобы помочь мне обрабатывать цвет фона компонента, но я не знаю, как включить это в свои истории. Прямо сейчас мой цвет фона — ничто. Я бы хотел, чтобы для начала это был определенный цвет. Я использую React. Я добавил свой код ниже, любая помощь приветствуется!

Style.js:

 import PropTypes from 'prop-types';
import styled from 'styled-components';
import { colors } from '../utilities';

export const StyledButton = styled.button`
  color: ${colors.text500};
  text-transform: uppercase;
  width: 300px;
  height: 50px;
  font-size: 1.1em;
  letter-spacing: 0.1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 5px;
  border: none;
  background: ${props => props.color};
`;

StyledButton.PropTypes = {
  color: PropTypes.string.isRequired,
};

export default StyledButton;
  

Button.stories.js

 import React from "react";
import Button from "./Button";
import { colors } from '../utilities';

export default {
  title: "Button",
  component: Button
};

export const Primary = (args) => <Button {...args} />;

Primary.args = {
  label: 'Download',
  color: '${colors.primary500}',
};