In a glance Text(), there's a style attribute, and this takes a glance TextStyle.
This TextStyle is different to the TextStyle you use in your MaterialTheme. So you can't reuse your app's TextStyles.
Is it possible to reuse your app's TextStyles in a glance app widget?
Note that MaterialTheme is designed for Jetpack Compose UI elements not for Glance. Given the limitations of AppWidgets (i.e no custom fonts) I would avoid reusing the theme.
We are working on a "theming" API for Glance, in the meantime you can keep the TextStyle as top-level variable and reuse it when needed.
Related
I believe these two props both use emotion under the hood and they seem to do much the same thing. I've been using the css prop because I prefer template tags and real css vs. javascript style names for css properties. Is there any reason to prefer one over the other given that they are basically interchangeable in terms of functionality?
I read the page about the new MUI styles system here: https://next.material-ui.com/system/basics/
And it feels to me that the main difference is the following:
The css prop lets you write something that looks like classic css, as you would do in actual CSS, or Less/Sass, or styled-components
The sx prop gives access to the 'system' which is a set of utilities to quickly access props with shortcuts, as well as theme properties, which already existed before v5, but are now even easier to use.... after some learning curve...
The above documentation page gives a lot of examples.
So, I've been coding react-native way more than react lately and I noticed I can do the react native style of styling things in react, what's the harm in doing so?
E.g
With react instead of doing classNames I can simply do
<div style={styles.something)></div>
const styles = { something: { backgroundColor: "red" } }
What is the harm in doing so?
You can do it that way and it will work, but if you check the documentation, its not recommended mostly for performance concerns:
Some examples in the documentation use style for convenience, but
using the style attribute as the primary means of styling elements is
generally not recommended. In most cases, className should be used to
reference classes defined in an external CSS stylesheet. style is most
often used in React applications to add dynamically-computed styles at
render time. See also FAQ: Styling and CSS.
and this section too
Are inline styles bad? CSS classes are generally better for
performance than inline styles.
In the Office Fabric UI documentation every component has two interfaces, for example
https://developer.microsoft.com/en-us/fabric#/components/nav
has
INavStyleProps interface
and
INavStyles interface
a component implementing INavStyleProps can take in any of the listed props to customize style, for example
I am wondering if there is any way to interact with INavStyles classes exposed through the documentation; essentially what does implementing the INavStyles interface guarantee to the consumer of the component, other than the listed classes and styles are implemented. Is there a way to override, customize, or otherwise interact with the classes exposed through this interface similar to how we can use props to interact with components implementing INavStylesProps.
Here is link showing the use of both interfaces for Nav. It's a how we give to Nav the default styles.
In order to override the default styles for any INavStyles area, you can use the styles prop and pass to it a styleFunctionOrObject. As you can see from the first link provided, INavStyleProps are used to pass some values to be used in the styling of the parts of the Nav or booleans to have some conditional styling. Also, that is how we pass the theme to the styles.
A style function you can pass to styles prop would look exactly as the one we use to provide the default styles minus the getGloballClassNames. Also if you want to style just one area the return type should be Partial<INavStyles> as all areas are required and it will complain if you don't provides styles for all of them.
Let me know if this cleared the confusion on how to make use of both interfaces.
Currently, I am using a directive from a third-party library for a UI toggle button. I changed the background color and left/right positions of the toggle button a bit to meet my business specifications. E.g. the out-of-the-box style came as light green for true, light red for false; I changed this to a darker green for true, and a light grey for false. I also moved the toggle positionally a bit to the left. All of this works fine.
The one issue I'm experiencing is that for a split millisecond when the page with the toggle button renders, I see the old style quickly change from what came out-of-the-box, to my updated style. There aren't any other glitches in style after this fact, just the initial loading shows some quick shifting around on the element. This isn't a huge issue but I can't seem to pinpoint the issue or know why it is happening. Any thoughts? Something in an issue for CSS hierarchy perhaps?
Notes relevant to the issue:
I used the inspector to find the classes I needed to override, since the directive itself just uses an nz-toggle tag.
I am using !important to override. I've read that this is bad practice in itself but it is being used across the entire project and has been established as "our standard" of overriding styles
Here's an example of one rule from my CSS file compared to what comes out of the box:
.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}
vs.
.nz-toggle-wrap.true {background-color: #60bd68;}
Any thoughts?
This happens because your "new" CSS loads after the "old" CSS.
Of course that should be true anyway, because you want to override the old style, but it seems that the old and new code are too far away from each other hence you manage to see it change.
To solve this you have to move the new style "closer" to the old style.
The way to do it depends on your project architecture and your build process.
Another option is that the class "true" is added only after page load, and so only then your new style kicks in.
If you are loading this "third party library" locally, you might have to directly edit the CSS files of the plug-in.
With the plug-in you linked, maybe you need to edit this file directly to prevent the "flicker", which is caused by the styles loading in sequence:
https://github.com/tannerlinsley/nz-toggle/blob/master/src/nz-toggle.styl
I am currently using ExtJs 4.2 for developing my web pages. I would like to know whether we can define a template and can reuse the template across the pages..To be little more clear, the page header and footer remains the same across pages and only body component changes.
I mean something similar to tiles in jsp.
My scenario is like this:
I have defined a border layout in which the region="north" contains the header part, region ="south" contains the footer part and region="west" and region="center" have the body content.
All my pages have a similar layout...ie..the content at west/center is only changing across pages...so do we have solution to simplify this without defining the entire layout in all the pages...
Please let me know if further clarifications are required
~Ragesh Ak
I think you will want to use Ext.define, and extend the viewport component, giving it a border layout. See the ExtJS tutorial on creating custom components for how to do that. You will want to give it a border layout, and have static panels/containers/menus/toolbars for you north and south objects.
How you model your content/center and navigation/west components depends on the style of application you are building. If you are following the single page application concept with the Model/Store/View/Controller pattern that ExtJS gives you using Ext.app.Application, then you will want to drop empty containers in those slots since you can't swap out a border layout component. Putting in empty containers will allow you to call the removeAll function and then add your new items when changing views. If you are building a regular site that reloads the page whenever you move between views, you can extend the viewport that you created, and put your content directly into the viewport since it won't ever need to change.
Use define to configure a class that extends container and has the border layout you just described, so you can reuse this new class as you need.