I am trying to get the envelope icon to show after the Envelope link using REACT
in my index.js file, I have:
<Envelopestyling>
<p><i className="fas fa-envelope"><Link>Envelope</Link></i></p>
</Envelopestyling>
in my styling.js file, I have:
export const Envelopestyling = styled.div`
position: relative;
border: 2px solid black;
border-radius: 5px;
background: #fff;
margin: 10px 0;
padding: 10px;
text-align: left;
& . fas fa-envelope{ position: absolute, top:10px, colour: #000}
& .fas fa-envelope:after{
content:"\f0e0";
}
`;
All this does is duplicate the envelope icon: one in before the Envelope link and another after it but what I want is the envelope after the Envelope Link.
Any help is greatly appreciated. Thank you
I saw the problem is you are using css selector wrong way. You need to update like this:
& .fas.fa-envelope{ position: absolute, top:10px, colour: #000}
& .fas.fa-envelope:after{
content:"\f0e0";
}
Related
I am new to React and working on improving my skills. My question is the following:
What is the difference bettwen
<button className={classes["button--alt"]}>Close</button>
and
<button className={classes.button}>Order</button>
for accessing the properties from the css file.
.actions button {
font: inherit;
cursor: pointer;
background-color: transparent;
border: 1px solid #8a2b06;
padding: 0.5rem 2rem;
border-radius: 25px;
margin-left: 1rem;
}
.actions button:hover,
.actions button:active {
background-color: #5a1a01;
border-color: #5a1a01;
color: white;
}
.actions .button--alt {
color: #8a2b06;
}
.actions .button {
background-color: #8a2b06;
color: white;
}
I am stuck and don't seem to figure this out if anybody can give me a hint or a page or something I would highly appreciate thank you!
Basically, the dash - doesn't allows the class object to access the property directly using the dot operator such as using classes.button--alt so we access it using the alternate object key syntax which is using classes["class-key"]
I am trying to reproduce this code from https://styled-components.com/docs/advanced in typescript.
const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
`;
const Icon = styled.svg`
flex: none;
transition: fill 0.25s;
width: 48px;
height: 48px;
${Link}:hover & {
fill: rebeccapurple;
}
`;
What do I have to do for it to work in typescript?
The problem was that I was trying to reference a component that I imported from another file instead of that component's styled counterpart. I mistakenly thought it was a typescript issue.
I inspected the code in the browser inspect. I know which specific property needs to be changed but I thing I need to point its key to a different class name.
I would like to change the overflow property to hidden and i would mike to remove the border and border-radius.
.dzu-dropzone {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 120px;
overflow: scroll;
margin: 0 auto;
position: relative;
box-sizing: border-box;
transition: all .15s linear;
border: 2px solid #d9d9d9;
border-radius: 4px;
}
If it is not already created, create index.scss file in your project repo.
there , add the code like this:
.dzu-dropzone {
overflow: hidden;
}
This will override the css while rendering. You can do the same for the border properties too.
Youc can create two CSS files, a basic.css file with some minimal styling, and a more extensive dropzone.css. I added both and the style of my component was overriden.
So this is my problem, I am trying to print some components in React using window.print, my components have defined sizes say 5cm x 5cm, I have hidden all other components in the print page (note that the styling of the whole page is somehow complex to post here), the problem is that my components get resized when on the print page. I have looked a lot but nothing has worked for me.
Note that when I tested the same print in a different page (with no complex styling) it worked fine. So is there any way to pass the styles to the print window or "Override" the styling so that my components get rendered correctly?
Thanks.
EDIT: Here is my CSS. This is working fine in a fresh app so there must be something I used messing things up, I removed all #media print from Bootstrap CSS files but no luck.
I tried to put the code inside as well as outside the #media print but no luck as well.
As far as I know media should render real physical lengths and units, any help would be appreciated.
Thanks again
.print-only {
display: none;
}
#media print {
#page {
margin: 0;
size: a4 !important;
}
body {
margin: 0.5cm !important;
padding: 0;
}
.print-only {
margin-top: 20px;
display: block;
}
.no-print {
width: 100%;
margin: 0px;
display: none;
}
.Container {
position: relative;
display: block;
border: 3px solid black;
width: 6in !important;
height: 2in !important;
margin: 0;
padding: 0;
text-align: start;
}
.labels {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 6pt;
font-style: normal;
font-variant: normal;
height: 13px;
}
.container2 {
height: 39px;
font-size: 8px;
font-weight: 550;
position: absolute;
top: 20px;
right: 1in;
line-height: 13px;
text-align: center;
}
}
Recently, I've encountered with the same issue while designing a print template in React. I was totally wrong in my understanding that whatever styles I write in my CSS files will apply. Then I found there is certain semantics while are required to be followed while designing an HTML print template.
Take a look at this link. This will be very helpful for your design.
What is the proper way to apply :before and :after pseudo classes to styled components?
I know that you can use
&:hover {}
to apply the :hover pseudo class to a styled-component.
Does this work for All pseudo elements like before and after?
I have tried using the &:before and &:after strategy with some rather complex examples and i'm not sure if my attempts are not working because i've got something wrong with my example or it just doesn't work like that.
Does someone have some insight on this? Thank you.
Pseudo-selectors in styled-components work just like they do in CSS. (or rather, Sass) Whatever isn't working is likely a problem in your specific code, but that's hard to debug without seeing the actual code!
Here is an example of how to use a simple :after:
const UnicornAfter = styled.div`
&:after {
content: " 🦄";
}
`;
<UnicornAfter>I am a</UnicornAfter> // renders: "I am a 🦄"
If you post your code I'll likely be able to help debug your specific issue!
This will print the triangle at middle of the div.
const LoginBackground = styled.div`
& {
width: 30%;
height: 75%;
padding: 0.5em;
background-color: #f8d05d;
margin: 0 auto;
position: relative;
}
&:after {
border-right: solid 20px transparent;
border-left: solid 20px transparent;
border-top: solid 20px #f8d05d;
transform: translateX(-50%);
position: absolute;
z-index: -1;
content: "";
top: 100%;
left: 50%;
height: 0;
width: 0;
}
`;
This is good and simple answer:
https://stackoverflow.com/a/45871869/4499788 by mxstbr
but for elements requiring more complex logic I prefer this approach:
const Figure = styled.div`
${Square}:before,
${Square}:after,
${Square} div:before,
${Square} div:after {
background-color: white;
position: absolute;
content: "";
display: block;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
`;
As an object (note the double quotes):
const Div = styled.div({
'&:before': {
content: '"a string"',
},
})
Adding to #mxstbr answer
Note that when you want to render before based on props, don't forget to wrap it with double quotes (or single quotes) , example:
const Button = styled.button`
&:before {
content:"${(props)=>props.theme==='dark'?'dark theme':'white theme'}";
}
because
content:${(props)=>props.theme==='dark'?'dark theme':'white theme'};
will not work
Can try like this.
It works perfectly fine
var setValue="abc";
var elementstyle = '<style>YourClass:before { right:' + abc + 'px;}</style>'
$(".YourClass").append(setValue);
var rightMarginForNotificationPanelConnectorStyle = '<style>.authenticated-page.dx-authenticated .dx-notification .dx-notification-dialog.dx-content-frame:before { right:' + rightMarginForNotificationPanelConnectorWithBadge + 'px;}</style>'
$(".authenticated-page.dx-authenticated .dx-notification .dx-notification-dialog.dx-content-frame").append(rightMarginForNotificationPanelConnectorStyle);