When I try to use styled component to style reactstrap component, I am keep getting similar error like following. What is the solution?

Issue description

• components: name
• reactstrap version latest
• import method umd/csj/es (if umd, are you using the “full” version (only for v5+)?)
• react version #16.0
• bootstrap version #4.x

What is happening?

throw warning for functionality apply correctly, like below:

What should be happening?

it shouldn’t throw warning.

Steps to reproduce issue

1. build the component with attribute with CAMEL case
2. refresh the browser, when load component observe error

Error message in console

*note that it happens all the time as long as I tried to apply styled component above a reactstrap component to extend its styles

index.js:131 Warning: React does not recognize the `hasBorderRight` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `hasborderright` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Col)
    in Col (created by ColCenterAll)
    in ColCenterAll (created by StyledColCenterAll)
    in StyledColCenterAll (created by CreativePanelGroupCard)
    in div (created by Row)
    in Row (created by CreativePanelGroupCard)
    in section (created by ComponentContainer)
    in ComponentContainer (created by Container)
    in Container (created by CreativePanelGroupCard)
    in CreativePanelGroupCard
    in section (created by PaddedDemoSpace)
    in PaddedDemoSpace

Code

export default styled(Col)`
  padding: 8px;
  ${props => (props.hasBorderRight ? `
    border-right-color: ${grey3};
    border-right-width: 1px;
    border-right-style: solid;
  ` : null)}
`;

[TheSharpieOne]

https://github.com/styled-components/styled-components/issues/305#issuecomment-266197867 has a suggestion, but it looks like styled-components is still trying to determine a solution to this issue: https://github.com/styled-components/styled-components/issues/439

[TheSharpieOne]

Can’t borrow anything from that because they are different implementation. Reactstrap uses bootstrap’s CSS just as bootstrap does only recreating the javascript functionality so that it is not jquery making DOM manipulations. styles-bootstrap basically recreates bootstrap entirely, yes that’s right, it defines all of the styles and doesn’t actually use bootstrap’s css or styles.

There are advantages to disadvantages to both. With reactstrap, you have to use bootstrap’s css which may mean pulling in unused styles, but you can create a custom build of bootstrap css (per their docs) to only include the component styles you need. Using themes is just as its always been with bootstrap and you can use the same theme across multiple sites with various frameworks and libraries because it’s all just css. With styled components, you get only the styles you need out of the box, but now applying a theme doesn’t follow bootstrap’s docs and is specific to the library you used. Also that theme you made specifically for the styled component library only works for that library. This may not be a big deal, but for companies which have various sites written in various language using various libraries, making a change to 1 css project to provide a theme usable by all of them is a must. Brad frost has some good articles on technology agnostic style guides and implementation.