2

i create a css file with styled-components for my callcomposite, but when i deployed my application, some os these css properties, dont work.

how can i add a property css to my callcomposite inside components, like controlbar, video, buttons, etc... without losing it?

and the second, question, how can i customize background from this callcomposite root?

    <Container>
      <CallComposite adapter={callAdapter} />
    </Container>

in my container, i have some css using styled components.

export const Container = styled.div`
  height: 100vh;

  .ms-Dropdown-title {
    background: #ffffff;
    border-radius: 5px;
    border: none;
    font-family: "Poppins", sans-serif !important;
    font-size: 11px;
  }


  .ms-Stack .css-131 .ui-icon {
    color: black;
  }

  .ui-icon {
    color: black;
  }

  .ms-Button--primary {
    width: 364px;
    height: 54px;
    border: none;
    background: #28dc8e;
    border-radius: 8px;
    filter: drop-shadow(5px 4px 10px rgba(0, 0, 0, 0.25)) !important;
  }

  .ms-Dropdown-label {
    font-family: "Poppins", sans-serif !important;
    color: white;
  }
`;
Alisson Blaas
  • 21
  • 1

1 Answers1

1

At this time we only expose styles at the component layer through fluent-style styling. Currently in design we are exploring the use of design tokens, css-like variables oriented towards user facing naming conventions than css terms that a web developer would better understand.

Please come and share your issue on our github issues at https://github.com/Azure/communication-ui-library/issues and we can see if we can help you out.

Alex Kwan
  • 11
  • 1