How can I style a custom tag with Styled Components?
I want to style an image with AMP HTML which needs an amp-img tag, not a img.
Here is what I would like to do:
const Image = styled.('amp-img')`
filter: blur(2px);`
Thx!
You may refer with this AMP HTML Components documentation.
Styling and theming of AMP-provided components is all done via CSS. See the AMP Spec for more detail.
AMP elements can be styled with class or element selectors using most common CSS properties. Add any styles to an AMP page using a single <style amp-custom> tag in the head of the document. For example:
<style amp-custom>
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
Also from this page, it stated that amp-img can be styled directly via CSS properties. Setting a grey background placeholder for example could be achieved via:
amp-img {
background-color: grey;
}
Hope this helps!
You can't style an amp tag directly via styled components. Instead you can wrap it with a div and style that div.
const Image = styled.div
filter: blur(2px);
<Image><amp-img /></Image>
Related
In my React form I am using Formik, Yup and Material ui form and textfield:
import { TextField } from '#material-ui/core';
for my E-mail form.
When I blur out the field it's generating the following HTML:
<p class="MuiFormHelperText-root MuiFormHelperText-contained Mui-error">This field is required.</p>
How do I add an svg icon to this helper text?
For example a React component <HelperText icon={MyIcon} />, is that possible?
You can add the svg with css class from the global styles.css file, it is not a best practice but it's a nice workaround if there is no other solution for this situation.
Similarly easy to using SVG as an img, you can use it in CSS as a background-image.
for example:
.MuiFormHelperText-root MuiFormHelperText-contained Mui-error {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(example.svg);
background-size: 100px 82px;
}
Notice we set the background-size to the size of the logo element. We have to do that otherwise we’ll just see a bit of the upper left of our much larger original SVG image. These numbers are aspect-ratio aware of the original size. But you could use a background-size keywords like contain if you want to make sure the image will fit and can’t know the parent image will be of the exact right size.
I have a tag div:
class="ant-upload ant-upload-select ant-upload-select-picture-card"
I tried many ways but can't change the style of tag div.
Thanks for watching!
You can override the default style by adding your custom style. For example, if you want to change the background color, add new CSS class in your custom CSS file as,
.ant-upload.ant-upload-select-picture-card{
background-color: 'red';
}
How can I add general styles to my page inside of one of my components. For example, I when my components loads, I want to add a style like this to whole page:
*{
direction:rtl;
}
and when the component unmounts, I want the style to be removed. I am using css modules for styling.
We can do it using jsx style:
<style jsx="true">
{`
* {
direction:rtl;
}
`}
</style>
I cannot find better solution for theming. I have a sass-file with variables:
vars.scss:
$colors: (
dark: (
theme1: #0096dc,
theme2: #eb8200,
…
),
…
);
For now I pass theme prop to all components which should have some styling depending on which page user is viewing. In React I build classname like this:
<div className={styles[`button${theme ? `-${theme}` : ``}`]}>{children}</div>
and in sass I do:
#import 'vars';
.button{
/* basic styles */
font-size: 14px;
border: 1px solid;
#each $theme, $color in map-get($colors, dark) {
&-#{$theme} {
#extend .button;
border-color: $color;
color: $color;
}
}
}
But this is absolutely inconvenient, because I need to place such code every time I need to style element depending on theme.
There are solutions how to load different files with variables for theming in webpack, but I receive theme prop from redux, so webpack doesn't have access to that prop.
As well as, I cannot find solution to pass property from react component to sass. Only opposite.
No way to use variables in imports in sass. Still not implemented.
Unfortunately, Cannot use CSS-in-JS approach in current project.
Please help to find better approach.
I would make it a stateless functional component.
function BrightBox(props){
<div className={styles[`button${theme ? `-${theme}` : ``}`]}>
{props.children}
</div>
}
Then import it and use it. There is no need to pass theme around.
{user.notice ?
<BrightBox>
there are {user.notice.issues.size} outstanding issues!
</BrightBox>
: null
}
Let imagine I import library react-select or any other that I don't have direct access to its component and jsx. Is it possible to pass your own style to child DOM element like drop down menus from other library. Like your can with normal css div div div{... here you will style only children}. I am using Radium.
In my case I want to change the z-index of Select Select--single is-searchable class and style drop down menu.
Radium provide so called Style component that allows you to style such components that you imported from other libraries Link: https://github.com/FormidableLabs/radium/tree/master/docs/api#style-component.
Example:
<Style
scopeSelector=".scoping-class"
rules={{
color: 'blue',
span: {
fontFamily: 'Lucida Console, Monaco, monospace'
}
}}
/>