Open hanscl opened 3 years ago
The Button has these font-styles per specification.
What we mean by "typography-styles" is default styles for h1-5
.
So <MaterialApp><h1>Test</h1></MaterialApp>
and <MaterialAppMin><h1>Test</h1></MaterialAppMin>
is different.
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
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 :
svelte-materialify.d.ts
file and don't forget to include it in your tsconfigedit 23/06/2021 : updated few wrong paths and added all non-implemented types into comments for quick uncommenting
edit 23/06/2021 2 : added breakpoints utils to types def so no more typescript errors when trying to use js breakpoints
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:
`
`
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; }