-
Notifications
You must be signed in to change notification settings - Fork 84
Unable to remove typography styles #231
Comments
The Button has these font-styles per specification. I think someone asked before if the Button could have different text styles, where we answered that wrapping it and providing custom css there might be a solution. |
There seems to be some misunderstanding. No typography isn't mean no formatting. It means:
MaterialAppMin imports:
But all syles are imported from .../Button/Button.scss, and you can simply modify it in .../Button/_variables.scss BUT... I don't know how to Rollup work with unused imports, and why they included unused css code...If you want really minified css you must use this type imports: //nottice, for `MaterialAppMin` we must import Svelte component.
import MaterialAppMin from 'svelte-materialify/src/components/MaterialApp/MaterialAppMin.svelte';
//this import loads Typography css
// import { MaterialAppMin } from 'svelte-materialify/src/components/MaterialApp';
import AppBar from 'svelte-materialify/src/components/AppBar';
import Button from 'svelte-materialify/src/components/Button';
import Icon from 'svelte-materialify/src/components/Icon'; |
Thanks for the explanations. Much appreciated |
How convenient to find this issue now, I should've made one myself :) Vite uses Rollup internally, so the problem happens with Vite too. I have a feeling it has to do with the master export file, but I can't be so sure, especially since such exports patterns are common to the node ecosystem... I wanted to reach the Vite team but after sending my question to the vite discord server and getting no response, I didn't have time to open an issue / discussion to their repo yet, but I don't think it's on Vite's side, but rather Rollup to fix this if you are not using Vite. Welp, subscribing to keep up if you find anything useful or such fix! (in the meantime, you could import the components using the full path, those don't seem to trip up Rollup's bundle stage : import MaterialAppMin from "svelte-materialify/src/components/MaterialApp/MaterialAppMin.svelte";
import Button from "svelte-materialify/src/components/Button/Button.svelte"; if that helps in any way currently, although you lose Typerscript's types) *Edit : just saw that bato3 already mentionned this fix too, ah well, I guess I confirmed that this fix is the way to go currently! |
Well, if you are using Typescript, you may realize that using @bato3's technique or mine's above to import components with minimized build prevents you from using the types of these components Until this configuration is fixed / svelterial comes out, you can use this (non-exhaustive) typedef file to at least get some typings back : Put this into a
|
Hi,
According to the docs (https://svelte-materialify.vercel.app/components/material-app/) I should use
<MaterialAppMin>
to avoid using the provided typography styles.However, this does not work for me. The button remains in all UPPERCASE and the letterspacing is also still larger than normal. Here is the svelte HTML mark-up:
<MaterialAppMin theme="light"> <Button depressed class="primary-color">Test</Button> </MaterialAppMin>
Upon inspection of the button in Chrome I see that the
letter-spacing
andtext-transform
classes are still being applied..s-btn .s-btn__content { display: flex; align-items: center; flex: 1 0 auto; color: inherit; justify-content: inherit; line-height: normal; position: relative; font-size: inherit; font-weight: 500; letter-spacing: 0.0892857143em; text-transform: uppercase; }
The text was updated successfully, but these errors were encountered: