react-bootstrap,不能使用bsStyle属性

#1

全网都没搜索到这个报错,难道真的全世界只有我遇到这个问题:
Warning: React does not recognize the bsStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase bsstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

环境是react脚手架生成的
测试代码很简单.
1.入口文件引css
import 'bootstrap/dist/css/bootstrap.css'

2.随便一个组件测试一下<Button>
import { Button } from "react-bootstrap";
..中间省略...
<Button bsStyle="success">click</Button>

结果:
1.能正常显示这个按钮,但bsStyle属性明显未生效,无论怎么改永远是默认样式
就算删掉也是如此:
image

2.而且,浏览器Console报错
Warning: React does not recognize the bsStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase bsstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

react不认这个属性

3.改了小写bsstyle当然也没任何作用

4.当然,使用传统的bootstrap的className的方式,可以正常显示
<Button className='btn btn-success'>click</Button>
image

那么究竟应该怎么弄才能像官网一样使用bsStyle?
网上搜到的都是在public/index.html里面引bootstrap各种包,无效,我觉得也不是这个问题.
问题就是react没把bootstrap的组件当react组件,不认自定义prop

#2

改名了 bsStyle -> variant

1 Like
#3

十分感谢你的帮助

#4

还想请教下,错误提示指出react不支持自定义组件里以驼峰命名的prop,是不是我少配置了什么地方呢?毕竟react-bootstrap里面有大量prop都是这种命名的.
React does not recognize thebsSizeprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasebssizeinstead.