I am trying to use a variable to create a progress bar by using two views and setting the width equal to a percentage of the parent view. I would like to do this using Tailwind's utility classes.
<View className='w-full h-10 bg-blue-500'>
<View className={`w-[${percentage}] h-10 bg-blue-300`}/> // this uses back ticks, which works for px values, but not percentage
<View/>
I have tried adding % sign everywhere in the className, with no success. Obviously, it works if I use the style attribute, but ideally I would only use the className attribute.
As mentioned, Tailwind does not generate classes at runtime. To achieve this with classes either requires Tailwind to make every single possible class that's a percentage (only feasible if percentage is an integer), but that bloats your styles, or for there to be something at runtime, constantly scanning each element for tailwind-like classes.
The best option, especially since you're doing such a simple property, is to use the style attribute.
Related
Issue
I am trying to create a custom Tab component using the styled method and I want my custom Tab to use the same background as a Paper with an elevation of 1.
I have an app that allows light and dark mode.
As you can see in the documentation (screenshot below), the Paper component gets lighter and lighter when you increase the elevation. This is done using the css property background-image (I inspected the html code to know that).
Usually, to make a custom component, I use the theme provided by MUI to access constants such as background-color of a Paper: theme.palette.background.paper. The problem is: I would like to have access to the constant for background-image (for elevation = 1).
I would like to have access to something like theme.palette.backgroundImage.paper[1].
Question
Is there any way to do that without hard-coding the values?
Details
MUI version 5
I have a Tree component from the library React Arborist.
This component has a default height and I can modify it by using the prop height.
(for example: height={700})
The problem is: I want it to be responsive and this prop is using pixels, instead it should be %. However, this props only accepts numbers, not strings like '100%'.
Does anyone know how could I fix this?
I have tried by adding a className with a property height using the rule style !important and it worked but this is a terrible practice.
Also I tried to add an external component but the styles from the Tree are strongest I guess because it is inside.
I am developing a web app and I want to use CSS grid layout. After few hours, I figured out most of my layouts were incorrect because the style was overwritten by lower component, losing gridArea. I had just been lucky it had worked so far.
Because I believe it's the container's responsibility to place items, items should be agnostic of whatever gridArea the upper component decides to assign them. Moreover, I have factories of components so I sometimes just don't know which item will be there. I am now doing this boilerplate in all my components:
<div style={{ ...props.style, ...styles.ThisComponent }}>
my item content...
</div>
What is the correct way of doing it? Any pitfall?
I am rewriting all my components now, please save me a lot of efforts!
CSS grid is only supported by the most recent browsers.
Wouldn't you prefer using Grid layout from material-ui? Then you can adjust everything. Here's a link if you do, there's also a CSS Grid layout exanplation there.
Hard-coding the styles property in all the components you will ever write like above seems to be an overkill. Also, using a fallback for browsers without CSS-Grid support should also be a priority.
Have you tried creating wrappers in styled-components and then putting your component code inside ? Could potentially save you the trouble if all the outer divs should have the same style ? The syntax may change a bit from what you have written, but seems more maintainable*
*might be opinionated
I have a class of images called glyphs that appear through out my site. Once upon a time they were all called just called glyph. They used to only appear in one box. That box was a specific size and I used a javascript method to make sure the text always fit and the glyphs were always about the same height as the rest of the text. This was easy to do and the glyphs started off with a default due to my style sheet.
Now, I've decided to include multiple boxes per page with variable amounts of text. Each box gets sized independently. I've tried delaying the sizing routine, but this is highly reliant on a user's connection speed. If I don't run the sizing routine then things don't look right at all, so I'd at least like to pick a default starting size for everything. Of course, you can't size stuff with javascript until it has been loaded. Snake eats tail.
So basically, now that I have more than one box, each glyph gets a class glyph:1, glyph:2, etc. This number can go as large as the number of user submitted items on my site. How does CSS handle this? These items basically need two class names as far as I can see. But I'm pretty sure that's not allowed.
What I need: Set all images classes that begin with "glyph:" to 1em
This doesn't exist, right? glyph:*
Also, : is probably bad to use in a css class name, huh?
Don't use the : symbol. you can have more than one class for an element so do it like so
<div class="glyph glyph-1">Foo</div>
<div class="glyph glyph-2">Foo</div>
<div class="glyph glyph-3">Foo</div>
<div class="glyph glyph-4">Foo</div>
As others have said, you shouldn't use the colon symbol in class names. Hyphens and dashes are the only punctuation that is sensible to use.
It is possible to use colons in classes and escape them in your CSS code, but it gets really messy and is unnecessary.
Secondly (and this is where I'll go further than the other answers), if you're generating unique class names for your elements then you're probably doing something wrong.
The id attribute is there to give your elements a unique name; the class is intended to allow you to apply the same class (or classes) to multiple elements, thus allowing you to style all those elements the same. You probably know this already; I guess what I'm saying is that it sounds like you should be using id rather than class.
Next: You say you're pretty sure two class names is not allowed, but in fact it is allowed. It is perfectly permissible to have class="glyph bob" and your element will pick up styles from both class glyph and class bob. You can have as many classes as you like. I would still say, however, that if you want to give them unique names, it should be an ID.
You also ask for CSS syntax to set all the glyph* classes. Again, you're wrong: this syntax does exist, via the extended attr syntax:
[class^="glyph"] {
/*styles here for classes beginning with 'glyph'
}
You talk about delaying the sizing routine, and the problems that introduces. One solution to this could be to have the items hidden entirely until the browser has finished working out how they should look. You could even fade them into view or something to make it look like it was a deliberate effect.
But after all that, I'm left wondering why you're putting glyphs in images and sizing them independently? It all sounds a bit odd; your description in the question leaves me wondering what you're trying to achieve.
Have you considered using scalable graphics (SVG/VML) or a custom font for your glyphs, rather than images? If you used a custom font, you could simply specify the font size as normal, and let the browser work it all out.
Hope some of that was helpful.
CSS class names can't contain the : symbol. Everything after the : will be interpreted as a pseudo-class (like :hover) and will not be parsed properly.
As for your classes, why do they all have to be unique? Classes are made to select multiple elements at once, so you can just do this:
<div class="glyph">Foo</div>
<div class="glyph">Foo</div>
<div class="glyph">Foo</div>
<div class="glyph">Foo</div>
And select them all with one selector:
.glyph {
color: red;
}
I got a datepicker set up for my main page and now I wanna set it up for some of my other stuff. The problem is that I need it smaller than what I'm using on the main page. Is there a way to have different sizes for different instances of the datepicker?
jQueryUI uses CSS to style all of it's widgets, and those are typically stored in a CSS file as theme. Depending on the theme you're using it may or may not be possible.
If the theme you're using uses ems or % for the width and font-size, then you could easily create a new style that would alter the look of all of its children.
For example:
.someClassNotOnTheMainPage .datepicker {
font-size:.75em;
...
}
If you're looking for a pure Javascript solution or an option to pass to the datepicker widget, unfortunately, there isn't one.
You can design and load a different css than the default jQueryUI theme. Although the themes usually have the same size for the calendar, you can choose to personalize this feature to your needs.