1

我想在我的组件中添加按钮、表单元素等，但它们看起来没有样式。如何让他们使用主题样式进行渲染？我可以使用的按钮/下拉菜单/选项卡或 css 类的任何常见组件以及如何使用？

4

1 回答 1

0

我还没有找到真正继承样式的好方法，因为它们使用了样式组件（Emotion）。我实际上一直在重建 flex 组件（老实说这似乎是一种浪费）。

下面是我如何重新创建一个 Flex 按钮：

./src/components/FlexButton/FlexButton.jsx

import React from 'react';

import FlexButtonStyles from './FlexButton.Styles';

const FlexButton = (props) => {
  return (
    <FlexButtonStyles {...props} />
  );
};

export default FlexButton;

./src/component/FlexButton/FlexButton.Styles.js

import { default as styled } from 'react-emotion';
import { withTheme } from '@twilio/flex-ui';

const FlexButtonStyles = styled('button')`
  align-self: center;
  height: 28px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  white-space: nowrap;
  color: rgb(255, 255, 255);
  padding: 0px 16px;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  background: linear-gradient(to top, ${props => props.theme.colors.defaultButtonColor}, ${props => props.theme.colors.defaultButtonColor});
  outline: none;
  border-radius: 100px;

  :hover {
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: color;
  }

  :disabled{
    background: ${props => props.theme.colors.disabledColor};
  }
`;

export default withTheme(FlexButtonStyles);

我只是通过查看实时源代码偷走了所有的 CSS。

于 2020-02-06T12:41:49.943 回答