Cannot multiple text styling

[fahmidyt]

Hey.. I am trying to styling Text using
font-weight: bold; font-style: italic;

and the problem has showed up. The text only read one of that css style.

This is my code:

export const BI = style.Text`
    font-weight: bold;
    font-style: italic;
`;

export const Row = style.View`
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: ${props => {
      return props.mb ? props.mb : "4px";
    }}
`;

export const Container = style.View`
    margin: 16.56px 36.72px 0px 39.6px;
    font-family: 'Roboto';
    background-color: #fff;
    font-size: 10px;
`;

export const Col = style.View`
    width: ${props => {
      return props.width ? props.width : "auto";
    }}
`;

const Report = ({data}) => (
   <Document>
      <Page size="A4">
         <Container>
            <Row>
               <Col>
                   <BI>This is some text.</BI>
               </Col>
            </Row>
         </Container>
      </Page>
   </Document>
);