I am trying to dynamically change the styles based on ternary classnames.
I am trying to change the background to dark or light based on the input on the workWrapper in here:
The CSS:
.normColor{
background-color: #f3f3f3;
width: 100%;
height: 100vh;
margin: 0 auto;
}
.normColor .dark{
background-color: #232A4E;
width: 100%;
height: 100vh;
margin: 0 auto;
}
I already tried messing around with the component, searching for other similar issues to mine and trying to search youtube videos regarding it but I cannot find any solution.
You forget to de-structure your props.
try this :-
const WorkSection = ({workWrapper}) =>{
return(<div className={workWrapper?'normColor':'dark'}></div>)
}
And you checking props, if it is null or not. And it will always give you true, because components always have props
Related
i need to apply css to a field, but i don't know which elements the user want to change. I have a module where a user can create forms dinamically, creating fields and so on, and they can set styles too. They will write in the box all the stile they want, like : color: red; background-color: black...etc;
I found many questions about but all the answers require everytime to know the property to change, so my question is : Is possible in angular to pass to a field a variable that contain { property: value;...} and apply it dinamically?
Example of text written by user:
{color:red; background-color: white; border: red 2px solid; opacity: 0.3; position: absolute; top: 0; left: 0; width: 100%;height: 100%;
}
Example of the input field where i need to apply it:
<input matInput [type]="getInputType()" [formControlName]="field.Name" [readonly]="field.Readonly"
[required]="field.Required" [(ngModel)]="record[field.Name]" (ngModelChange)="onRecordValueChange()">
I've tryed [ngStyle]= variable but ngstyle seems requiring the property and then ou can bind a variable to it, but if i have to map all the possible variables in css it will be a wall of code... Hope someone can help me out with this tricky problem. Thanks in advance.
Update correct in the code
const keypar=b.replace(/['"]+/g, '').split(":")
To allow some like
style="{'color':'red'}"
You can create an object based in the string and use ngStyle
style="{color:red; background-color: white; border: red 2px solid; opacity: 0.3; position: absolute; top: 0;left: 0; width: 100%;height: 100%; }"
styleObj=(this.style.replace("{","").replace("}","")).split(";").reduce((a,b)=>{
const keypar=b.replace(/['"]+/g, '').split(":")
if (keypar.length>1)
a[keypar[0].trim()]=keypar[1].trim();
return a
},{})
<div [ngStyle]="styleObj">Hello</div>
NOTE: I choose use split instead of use a complex Rexepr to conver the string to a json object and use JSON.parse
stackblitz
Hi I just started using Material UI and am having a hard time styling the components. I am building a sign in page and would like my Submit button to be all the way to the bottom right. If someone can help me out that would be greatly appreciated because it seems to be inheriting styles from everywhere else but where I would like to!
I have tried adding
textAlign: 'right'
to buttonStyle and that does not work. I have also tried adding
text-align: right;
to my .form-button CSS.
The only thing that affects anything is removing the .App
Login.js
<div className='form-container'>
...
<Button
style={buttonStyle}
className='form-button'
variant='contained'>
Log-In
</Button>
</div>
...
const buttonStyle = {
backgroundColor: '#527354'
};
App.css
.App {
text-align: center;
}
.form-button {
width: 83px;
height: 36px;
box-shadow: 0px 1px 3px #00000033;
}
.MuiButton-label {
color: var(--primary-white);
font-family: 'Open Sans', sans-serif;
}
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
Another main goal would be to avoid inline styling because I do prefer keeping it within my style sheet. But if not possible or too overly difficult, I will inline style (as I did with the background-color).
As keikai has mentioned in the comment, you may check the Documentation in this link material-ui.com/styles/basics for overriding style.
For 'it seems to be inheriting styles from everywhere else'
I will suggest you to use styled-components instead of global css import, which mess up everywhere. Try this,
npm install --save styled-components
It creates a css class that only apply to the component.
Sample code:
import styled from 'styled-components'
const MyDiv = styled.div`// can be span, section, etc
// add your style here for the div
your div style(optional)
// your class css inside the div
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
// add more class if you have any
`
Then wrap your component with
// your newly created styled div
<MyDiv>
// component that needs your style
<MyComponent />
</MyDiv>
Your style will only be applied to MyDiv and MyComponent, and nothing else.
It may took awhile to get used to it, but it is extremely useful.
I've read the other questions on here about overriding inline style imported from Javascript and I feel like I'm missing something here.
The iframe and current code can be seen at
https://www.timedoutescape.com/waiver/
(you can put random first / last name and email to get to the signing interface I'm trying to style)
The current code is --
<div id="signingSpace" style="background-color: white; height: 300px; width: 819px;" class="kbw-signature"><canvas width="815" height="296">Your browser doesn't support signing</canvas></div>
And I'm trying to override it with
#signingSpace[style] {
height: 100px !important;
}
Any advice?
Coming from SCSS (SASS)
What would be the appropriate Styled-Components implementation of the below SCSS code?
SCSS:
.circle{
$size: 16px; // <-- SCSS FTW. use such a trick in styled-components
height: $size;
width: $size;
.. rest of properties...
}
Currently the styled-component (Circle) looks like this:
...lots of other styled exports
export const Circle = styled.div`
height: 16px;
width: 16px;
background: red;
border-radius: 50%;
`
...lots of other styled exports
Problem is, I want to keep that "meaningless" size variable in the same context where it's consumed (just like in SCSS) because nothing else cares or will ever care about it. I don't think dumping a variable somewhere and then using it with '${size}' is a "clean" way. such tactics are petty and promote messy code-base.
I have devised a neat trick to encapsulate variables only for a specific scope:
styled.h1(({size='4em', color='lime'}) => `
font-size: ${size};
color: ${color};
text-align: center;
`)
I've written a Medium post in the past which breaks down the explenation of this method
One way to solve this problem is to create a separate file with all the variables that you want to use later in your style files:
export const Variables = {
size: '16px',
bgColor: 'red',
}
then you can import it:
import { Variables } from './Variables'
export const Circle = styled.div`
height: ${Variables.size};
width: ${Variables.size};
background: ${Variables.bgColor};
border-radius: 50%;
`
You can use classic css properties (with IE11 polyfill in mind) like this:
--radioWidth: 42px;
.MuiRadio-root {
width: var(--radioWidth);
}
.conditionCollapse {
padding-left: var(--radioWidth);
}
I'm new to advanced CSS and I've been following this tutorial for generating sprites using gruntjs, spritesmith and less. I'm stuck on how to solve the following problem. Firstly, I generate a .less file containing the information of each image inside the sprite. It looks something like this:
#mobile_logout-x: 1586px;
#mobile_logout-y: 0px;
#mobile_logout-offset-x: -1586px;
#mobile_logout-offset-y: 0px;
#mobile_logout-width: 256px;
#mobile_logout-height: 256px;
Using grunt-contrib-less I can now use the following to get the sprite into my target css:
Less template
.mobile_logout {
.sprite(#mobile_logout);
}
Result
.mobile_logout {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
}
This would be fine if I wanted to use this directly in the HTML, but I'd like to specify this as part of another CSS class. An example would be:
.myTestButton {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
color: white;
background-size: 1.3em 1.3em;
background-position: top right;
}
The problem is at this stage I can't find a way to get the width and height to be represented as background-width and background-height, which is where I am looking to get to.
I've tried changing the values in the sprite.less file to match what I'm looking for, but have found that was a hack that didn't work. Another option I have been considering is having a mixin to return the correct item with the width translated, but because these are generated from less I couldn't get that to fly either.
Just after posting this I looked into where the sprite function came from and found my answer in the generated sprite.less file:
.sprite-width(#sprite) {
width: ~`"#{sprite}".split(', ')[4]`;
}
.sprite-height(#sprite) {
height: ~`"#{sprite}".split(', ')[5]`;
}
The sprite.less file is generated using a mustache template. In order to solve my problem in Spritesmith you can specify a mustache template. It was also incorrect that I was looking at background-width and the property I needed was background-size. My attempts at inlining also failed, and I should have been looking at using a div rather than sizing the sprite component.