问题
We are working on a React application (using Create React App without ejecting it) and we decided to use Ant as our base component library. Now that we are near the end of the project, we discover that the application will be integrated into a corporate portal (WebSphere) as a "portlet", so we inherit all the CSS files from the main page.
Both frameworks seem to have their own reset styles, but they use different values. So far, I have not been able to find a LESS variable in Ant that can be used for prefix all Ant's CSS rules.
Has anyone ever tried to make them live together?
We don't own the parent development, we can only make change on the React part, so only things related to Ant.
回答1:
Here you can see some of the default antd variables.
One of them is @ant-prefix: ant;. I think you can change it and apply different styles.
回答2:
That is a tough one, and at the end of development no less!
As @froston mentions, and which you seem to have tried the @ant-prefix: ant; in addition to this you will need to se prefixCls as a prop on every component instance you create, which will definitely be an exercise in self-flagellation.
Even if you set a global CONSTANT and import and use this with your components, you still have to thread it through to all the places, and will need to be appended with the component name.
By way of example, the defaultProps for an anchor is prefixCls: 'ant-anchor'.
Hope this helps and good luck!
回答3:
We finally go with a specific CSS patch file, and we add rules when needed.
Not really perfect, but none of the suggested path did the job we expected.
来源：https://stackoverflow.com/questions/51266161/how-to-make-bootstrap-3-and-ant-design-3-live-together