Custom Froala style css file in built-in?

I don't think it's possible to customize the built-in systemPageComponents.min.css file in Kentico. Even if it were, I wouldn't recommend it, since that file can change with Refreshes. The systemPageComponents.min.css is intended for the Page Builder, not the live site, so I suspect you're running into CSS conflicts there.

If you're experiencing the same issue in production, I suggest scoping the Page Builder styles only to the Page builder mode. You can do this in your main layout view file like so:

@if (Context.Kentico().PageBuilder().GetMode() != PageBuilderMode.Off)
{
    <page-builder-styles />
}

To deal with conflicts, the better approach is to create a separate CSS file with overrides. Reference it in your layout after both the Page Builder styles and your live site styles, and scope it specifically for the Page Builder. In that file, you can re-override the conflicting rules.

I know it's not the cleanest solution, but this is the trade-off when combining multiple frameworks that bring in their own dependencies. Personally, I wouldn't touch the built-in CSS directly, but instead handle conflicts through my own scoped overrides.