Overview
Some components have a ::before pseudoclass with the content property set to the CSS code \200B , which is a zero-width space. However, in our project, this is coming out as ​ in the DOM.
For example, with the <Dialog /> component:
1. We render the dialog within a componet, giving it a title which comes from props
const MyComponent = (props) => {
return (
<Dialog title={props.title} onClose={props.onClose}>
. . .
</Dialog>
)
}
2. Locally (running in our development environment) we can see the CSS come out as expected
3. After building and deploying to an environment, the "" gets replaced with ​
Additional Information
After building the project locally, our CSS (build/static/css/main,xyz.css) does not include these symbols:
We are using Craco to build our project:
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [require('autoprefixer')]
}
}
}