Really simple problem, but I cant find a solution. How would I be able to style both of the typography components without having to repeat the tailwind styling on each line, I try to put the stying in the "parent" div but it wont work. Thanks in advance. This is for a React-app
<div className="parent">
<Typography variant='Title' text={Company} classes="py-2 px-15 rounded-5" />
<Typography variant='SubTitle' text={City} classes="py-2 px-15 rounded-5" />
</div>
You can use classes.
classes is an object
Use mui css properties inside classes object
<Typography
classes={
root: 'custom-class',
}
>
...
</Typography>
Related
I have multiple component in a razor file and those components bases I cannot modify. The components does not have 'style' and 'css' properties.
One of them generates a div with the following structure
<div class="pr-6 pl-3 py-4 ">
<div class="flex space-x-4">
</div>
</div>
I should apply a width: 100%; on the div like a style or a class that has the style.
I tried to add new css class in the xy.razor.css file, but I cannot find the div and cannot apply the styles.
I tried (and some other very basic stuff):
::deep div.pr-6.pl-3.py-4 {}
.pr-6.pl-3.py-4 {}
I am not a css wizard myself. Is there any way to solve this?
p.s.: Finding the DOM element with JS and apply the class on the element is not a way :D
You should be able to add this to the page, from which you call the component:
<style>
.pr-6.pl-3.py-4 {
width: 100%!important;
}
</style>
This however will apply to all <div> tags with class="pr-6 pl-3 py-4" on your page. If you have multiple of these and it should only apply to one, you would possibley need to create an interim component, to isolate the one you need this for.
I'm having trouble solving a problem.
I need to load some components dynamically.
And when loading some of these components, they are presented
faulty or no css styles, and all because of that first div element after the template.
When editing the DOM, and removing this DIV everything was correct.
However, VueJS does not let you use v-for in root.
I am using Vuetify components, so in some cases the Vuetify css needs a level that meets your css class, so this DIV cannot be between a component.
Is there any way to resolve this issue?
ControlsComponent.vue
<template>
<div>
<div v-for="(component, index) in childs" :key="index" draggable>
<component :is="component.Type">
<ControlsComponent :parent="component" :childs="component.Childs"></ControlsComponent>
</component>
</div>
</div>
</template>
Does this component have a parent? If it has try to put it into for-loop in parent. If it doesnt have a parent create one and make the for loop there. For example:
Parent Component:
<Child v-for="(component, index) in childs" :key="index" draggable></Child>
Child Component
<component :is="component.Type">
<ControlsComponent :parent="component" :childs="component.Childs"></ControlsComponent>
</component>
I'm trying to bold a single word within a React Material-UI <Typography> element (which also is within a Material-UI <Card>). I was just using html tags, and it works:
<Typography><b>First thing:</b> {answers[2]}</Typography>
But when I use them, they produce a visible re-sizing of the text on load.
I'm left nesting <Typography> tags, which forces me to apply a bunch of styling to make them appear normally:
<Typography style={{display:'inline-flex', alignItems: 'baseline'}}><Typography variant='h6' style={{marginRight:'3px'}}>Path:</Typography> {path}</Typography>
This seems like a janky solution. Am I missing something? Like another reason why the <b> tags are causing a load delay, or a built-in Material-UI solution?
Full code for the <Card>, as reference:
<Card className={classes.card}>
<CardActionArea>
<RenderImage imageAddress={myImage} widthAndHeight={[230, 180]} style={{marginLeft: '10%'}} />
<CardContent>
<Typography style={{display:'inline-flex', alignItems: 'baseline'}}><Typography variant='h6' style={{marginRight:'3px'}}>Path:</Typography> {path}</Typography>
<Typography><b>First thing:</b> {answers[2]}</Typography>
<Typography><b>Second thing:</b> {answers[0]}</Typography>
<Typography style={{marginBottom: 0}}><b>Third thing:</b> {answers[1]}</Typography>
</CardContent>
</CardActionArea>
</Card>
Have you tried with Box component?
You could do something like
<Typography component='div'>Normal text <Box fontWeight='fontWeightMedium' display='inline'>medium font weight text</Box> and some more normal text</Typography>
Note that component='div' prop on Typography wrapper is required as Box component cannot be nested under the Typography's default p.
Source Typography font weight
To fix the issue Mohamed mentioned, you can change the component Box renders as to span (displayInline will be unnecessary using this method):
<Typography>Normal text <Box component="span" fontWeight='fontWeightMedium'>medium font weight text</Box> and some more normal text</Typography>
You can also do something like this:
<Typography>normal text <strong>bold text</strong> normal text</Typography>
I have to remove the extra padding being adding up in .item-inner class inside .item-native.
https://ibb.co/vs4BWWp
<div class="item-native">
<slot name="start">
</slot>
<div class="item-inner">
<div class="input-wrapper">
<slot></slot>
</div><slot name="end"></slot>
<div class="item-inner-highlight"></div></div>
</div>
ion-item{
--inner-padding-end: 0px;
--padding-start:0px
}
This works, because since ionic 4 web components & shadow DOM were introduced to keep "essential CSS" isolated.
In a lot of cases it just works to put -- in front of the wanted CSS attribute to change it or in other words: just define a CSS variable with the same name as the attribute you want to change.
Does someone know a complete reference to ionic's shadow DOM or something like that?
Further information:
Shadow DOM in Ionic (and Why it’s Awesome), CSS Shadow Parts,
CSS variables, Web Components
.item-native .item-inner{padding:0}. this will remove padding of that element
this and remove padding of that element with class item-inner:
.item-inner{
padding:0 !important;
}
Is there anyway to specify a class after a pseudo element? For example, I want to find the :last-childof the parent - and if that child has x-class, style accordingly. With SCSS, this would be relatively easier, but the project I'm working on doesn't use SASS.
Any ideas?
Here's what I was trying to do...which is obvs wrong:
form .entry-form-wrap :last-child.nested-tmpl-inner
HTML is too complex to post, but I've included a general block of code to give you an idea of the flow:
<form>
<div class="entry-form-wrap">
<div class="some-class" />
<div class="some-class" />
<div class="some-class nested-tmpl-inner" />
</div>
</form>
It's not obvs wrong. You can specify a class right after the pseudo, like :pseudo.class.
Check this fiddle: http://jsfiddle.net/fYy4T/