I want to change style of the Navbar imported component.
because I use it several time I want to give different style to it per time I importing that.
I am using styled-components to style and tried this way but it doesn't work :
import Navbar from "../components/navbar"
const StyledNavbar = styled(Navbar)`
background-color: black;
`
how can I give style to imported components by styled-components?
Related
I'd like to use paper-item element within a lit-element based app.
Within the app, I'm using --paper-item CSS custom property which can be applied to the paper-item using #apply but since the feature is removed from browsers, it doesn't work now.
Looks like ShadyCSS can make it work, but don't know how to activate it. Can someone help me?
html {
--paper-tabs: {
font-size: 1.0em;
height: 24px;
color: var(--text-primary-color);
background-color: var(--default-primary-color);
};
}
The #apply shim is only applied to styles in the elements template. It was a bit too difficult to apply it to styles added via constructible stylesheets. So if you want to use it, move the styles to a <style> tag in the render() method.
I have a question on the way react components interact with each other. My question is this: say I have a child component called About.js, and I also have some sass styles lets say about.scss, in my about component I do a require(./about.scss) and import the styles i need for my component.
When I render in a parent component, does the about.scss styles conflict with the styles present in the parent.scss file?
What is the best way to go about styling individual components and setting up the file structure?
Thanks!
Yes, when you import your SCSS file from your React file, what webpack does is it take your SCSS file and transform it into CSS file, and wraps up the content with the style tag and inject it into your page, so at the end of the day, your DOM will look like this:
<style>
// parent.css
.conflict{
background: skyblue;
}
</style>
<style>
// about.css
.conflict{
background: hotpink;
}
</style>
And most React developers prefer method of styling a component is using the inline-style
const App () => (
<div
style={{
background: 'skyblue',
}}
>
</div>
);
I use the Kendo Upload component for Angular 2.
I cannot figure out how to hide the file list below the uploader button. I know it can be customized using ng-template but I want it to be hidden. I've tried setting the class like this :
.k-upload-files{
display: none;
}
but this has no effect.
Can you help ?
The file-list can be hidden by utilizing the showFileList input. API Reference
<kendo-upload
[showFileList]="false"
...
>
</kendo-upload>
Alternatively you can use a css rules to hide the file-list (as you already stated in your question).
.k-upload-files {
display: none;
}
I've prepared an example showing both approaches in action.
I would like to put a custom icon in a p:menuButton, is this possible?
Yest it is possible. All you need to do is to override primefaces css classes generated for the p:menuButton.
Approach:
In the rendered web page you can right click on the generated p:menuButton and -> inspect element. There you can inspect all of the related css classes.
You can try to experiment with them (which I would advice, if you have time) for better understanding of css selectors and so on ...
The .ui-menubutton .ui-state-default .ui-icon are the classes that you need.
So now when you know which css classes are related to the icon you can override them :
Add .ui-menubutton .ui-state-default .ui-icon rule to your stylesheet (I assume you have one and it is sucesfully imported and working. If not check here.)
yourStyles.css :
.ui-menubutton .ui-state-default .ui-icon {
background: orange; /** insert your background image **/
}
This will override icons of all p:menuButtons used in your project. If you want to reduce it to some particular p:menuButton then add its ID to the style definition.
#menubID.ui-menubutton .ui-state-default .ui-icon {
background: orange; /** insert your background image **/
}
I've been searching and searching for an answer to this problem and cannot found a solution.
I have added some custom styles to the CKEditor that add a margin-left to the selected text. The problem is that this causes the style previews to move to the right in the styles list. So much so, that they go off the right side of the dropdown. I don't quite have enough rep to post a screenshot unfortunately.
I would just like the styles in the list to have no preview at all if possible.
I have tried to add .cke_panel_listItem p {margin-left: 0px !important;} to my global.css and to the editor.css. I cannot override the inline style no matter what I do.
Any suggestions? Thanks in advance!
I was able to do this using the contentsCss config property. So:
CKEDITOR.editorConfig = function( config ) {
config.contentsCss = 'wysiwyg.css';
}
then in wysiwyg.css put your CSS code:
.cke_panel_listItem p {
margin-left: 0px !important;
}