How to add custom styles to an element

[leoalves]

💬 Questions and Help

Hi, I am new to styled-components, and xstyled. So far, I am enjoying the possibilities of using such tools. But I was wondering if there is a way to add custom styles to an element (kind of in-line styles)

For example, I have the following code.

const theme = {
  tables: {
    default: css`
      color: red;
    `,
    primary: css`
      color: pink;
    `,
    secondary: css`
      color: purple;
    `
  }
}

const variants = variant({
  // Variants are found in `theme.tables`
  key: 'tables',
  default: 'default'
})

const StyledTable = styled.table`
  ${system}
  ${variants}
`

This code works well, when using the styles from the theme. For example:

  <StyledTable variant="primary>
      // Table code ...
   </StyledTable>

But what if I want to add specific style just for this specific element, is it possible?

Something like:

<StyledTable variant="primary css={css`width: 100%;`}>
  // Table code ...
</StyledTable>

PS: I tried searching online and tried different ways, like style prop, className prop, and adding it as a variant with a function but could not make it work. Sorry if this is a dumb question.

Thanks

[leoalves]

Nevermind,

I was able to add the custom style with a function. Something like:

const StyledTable = styled.table`
  ${system}
  ${variants}
  ${p => p && p.css ? css`${p.css}` : ``}
`

Thanks