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')]
}
}
}
Hi Matt,
Sorry to dig up an old issue, did you manage to find your issue? We are having a similar issue using Vue.
Kind Regards,
Rob
Hi Rob,
Unfortunately we couldn't find the root cause of the problem. Instead, we had to implement a hack that unsets the content value:
// Strange symbols fix .k-table-list .k-table-group-row:before, .k-placeholder-line:empty:before, .k-skeleton-text:empty:before, .k-input-value-text:before, .k-radio-wrap:before, .k-calendar-infinite .k-calendar-view:after, .k-calendar-navigation:after, .k-calendar-navigation:before, .k-time-list-wrapper.k-focus:after, .k-time-list-wrapper.k-focus:before, .k-time-list:after, .k-time-list:before, .k-multiselecttree .k-input-inner:before, .k-window-title:before, .k-gantt-tasks td:after, .blockquote-footer:before, .k-icon-wrap:before, .k-checkbox-wrap:before, .k-list-header-text:before, .k-list-item-text:before, .k-list-optionlabel:before { content: unset !important; }
I hope this helps,
Matt.