1

I want to add buttons, form element etc to my component, but they appear without styling. How can I let them render using the theme styling? Any common componets for buttons/dropdowns/tabs or css classes I can use and how?

Kishore Barik
  • 742
  • 3
  • 15
  • Have you read abou [that](https://www.twilio.com/docs/flex/overriding-themes-branding-and-styling)? – Sultan H. Jul 25 '19 at 11:58
  • Yes I have gone through that. I don't want to override the theme, I want to utilize the existing theme. I have tried to import `import { Button } from '@twilio/flex-ui';` which somewhat gets some styling, But there is no documentation regarding the props supported. Also [here](https://www.twilio.com/docs/flex/overriding-themes-branding-and-styling#list-of-flex-ui-components-and-themable-objects) from where the `colors` object is imported? or it is just a synonym. – Kishore Barik Jul 26 '19 at 05:16

1 Answers1

0

I haven't found a good way to actually inherit the styles because they used styled components (Emotion). I've actually been rebuilding flex components (which seems like a waste to be honest).

Here's how I recreated a Flex button:

./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);

I stole all the CSS by just reviewing the live source code.

Cleanshooter
  • 2,314
  • 4
  • 19
  • 29