How can I avoid repeating (display:flex, justify-content:center , aign-items:center) in my codes?I want to use them but I don't want to repeat my self (DRY rule).
is there any way to define a variable or something which contains those three lines? (WITHOUT USING SASS)
Make a template class for all flexboxes in your code:
.flexbox {
display: flex;
justify-content: center;
align-items: center;
}
<div class="flexbox navbar-flexbox">*some code*</div>
<div class="flexbox content-flexbox">*some code*</div>
Related
Hi all I already have it looking centered and responsive but I am not sure if there is anything else I can do to make it even better
I have this structure:
div
div
svg
the first div has
width 100%
second has
display flex
align items center
then for the svg I have it's size:
svg[Attributes Style] {
width: 85;
height: 21;
}
What else can I do? I am testing it in various screens but I haven't found issues yet.
Try this
div div { ## this is the second <div> tag
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
and
svg {text-align: center;}
Is it possible to have a web part in SPFx which has (for example) a property "divWidth"
and it be a numeric value in px.
Then then a div renders with the width specified in the web part?
I know you could probably do it with inline styles but can you pass the value to an SCSS file?
Thanks P
Create the CSS Variables, for example based on the web part properties
let styleBlock = { "--tileWidth": this.props.width + "px",
"--tileHeight": this.props.height + "px" } as React.CSSProperties;
render it like:
<div className={`${styles.linkTiles} ${styles.tileCont}`} style={styleBlock}>
css will be like:
.linkTiles {
&.tileCont {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.tile,
.tileFlip,
.tileFront,
.tileFront>img,
.tileBack {
width: var(--tileWidth);
height: var(--tileHeight);
}
Using CSS Variables to Morph Your SPFx Design at Run Time
I'm starting to work with styled-components and had a question about scoping.
This is just a dummy example but one that shows the point.
So I have a component. I setup a styled div called Wrapper then instead of creating another styled component to handle group, I thought be easier to just add a class to the inner div called .group and using nesting like in SCSS to style the inner div. This works but the problem with using className for the inner div is there could be a collision with global styles called .group
So, is there a way to avoid this with scoping somehow, or would I have to create another styled component called Group to handle that inner CSS ? Seems like a lot of boilerplate to have to add another styled component just to style the inner components.
const Wrapper = styled.div`
color: blue;
.group {
padding: 10px;
color: green;
}
`
const MyComponent = () => {
return (
<Wrapper>
<div className='group'>
<h1>heading text</h1>
<h2>subheading text</h2>
</div>
<div>This is my blue text</div>
</Wrapper>
);
}
Here is my globalStylesheet with group. Obviously this only has one style but it could have way more to handle grouped elements globally.
export default createGlobalStyle`
h1, h2, h3, h4, h5, h6 {
font-family: '.....';
}
.group {
background-color: red;
}
`;
I know I could also do
> div {
border: 1px solid red;
}
but I want to be able to be more explicit with a className
I think it's better to create another styled-component for group like
const Group = styled.div`
padding: 10px;
color: green;
`
So you can be sure that overwriting styles properly. And if there will be more styles in Wrapper, it stays less readable. Also you can easily replace Group component into children or make as parent(in this case you should rewrite .group style from Wrapper to another one).
In future to prevent boilerplate code you can rewrite existed styled-components like
const Timer = styled.div`
background: #ff5f36;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-family: GTWalsheim;
font-size: 32px;
color: #ffffff;
`
const TimeIsUp = styled(Timer)`
width: 172px;
border-radius: 8px;
`
EDIT
Also you can easily replace Group component into children or make as parent
I'll try to explain in code below
const MyComponent = () => {
return (
<Wrapper>
<div className='someClass'>
<Group> // so you can replace only your component, without rewriting any style
<h1>heading text</h1>
<h2>subheading text</h2>
</Group>
</div>
<div>This is my blue text</div>
</Wrapper>
);
}
I mean you can easily replace Group component to any place of code. While when you write style from parent as it was in Wrapper, you should replace this .group style from Wrapper to another element which is parent for .group
It seems like overriding styles does not work consistently. I have this two styled components:
const StreamContentContainer = styled.div`
display: flex;
vertical-align: middle;
flex-direction: column;
flex: 0 100%;
align-items: center;
flex-wrap: wrap;
padding: 1rem;
flex-flow: column wrap;
`;
// new Component based on StreamContentContainer
with additional styles and override stlye
const FullStreamContentContainer = styled(StreamContentContainer)`
height: 56.11vw;
overflow: hidden;
padding: 0;
`;
Know if I use my FullStreamContentContainer there should be no padding. On CSR that works fine, the element shows up in the markup correctly.
But if the element is requested initial with SSR the padding of the StreamContentContainer overrides the FullStreamContentContainer again.
It does not matter if the node is generated on SSR or CSR, it shows up the same way in the markup:
<div class="sc-4y67w2-1 fodYop sc-4y67w2-0 WzHos">...</div>.
But if I inspect the element with the DevTools, I can see that on SSR first the class WzHos shows up and then the class fodYop:
Compared to the rules rendered on CSR the rules occur the other way round - like expected:
Does anybody know what causes this weird behavior and how to avoid it?
Problem resolved: Increased the specificity of FullStreamContentContainer styles by using
const FullStreamContentContainer = styled(StreamContentContainer)`
&&& {
height: 56.11vw;
overflow: hidden;
padding: 0;
}
`;
Relating to the SC docs, the repeated class bumps the specificity high enough to override the source order.
I've been playing a little bit with CSS3 flexible box model as described in this article: CSS 3 Flexible Box Model
I am trying to create a simple vbox with a nested hbox, something like this:
<div class="vbox">
<div>Header</div>
<div class="hbox">
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
</div>
<div>Footer</div>
</div>
However the content of the hbox is being laid out vertically and not horizontally. What am I doing wrong and how to do it correctly? Thanks.
The problem is that the display: box; declaration in the .hbox rule gets overridden by the display: block; in the .vbox > * rule. You have two options:
1 Make the display: box override the more specific rules:
.hbox {
display: -webkit-box !important;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
display: -moz-box !important;
-moz-box-orient: horizontal;
-moz-box-align: stretch;
display: box !important;
box-orient: horizontal;
box-align: stretch;
}
Approach 1 working example here, the main disadvantage of this approach is that you're messing with the default specificity rules of CSS which may cause confusion in other places.
2 Remove display: block from the more specific rules:
.vbox > * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
}
Approach 2 working example here, the main disadvantage of this approach is that you'll need all direct children of an .hbox or .vbox to be block level elements.