I am trying to override the .Select-control css component in react-select.
I want to set a custom height (the default is 36px) so it will look more closely to my other input fields
I have tried to add my own className prop as suggested in the docs however it does not seem to work and just pushes everything down (which makes sense since it's the wrapper for the component)
Is it possible to override the component itself?
I just started working with react-select and ended up overriding the components to bring the elements in line but also had success with passing in my own classes.
.Select-control {
height: 32px
}
I noticed that some of the css selectors can be pretty specific so referencing the css file helped to make sure I overrode the included styles. If you're using ES6 syntax I think you need to import your css after importing the react-select css in order to override.
Hope that helps
Related
I have a single-page vue 2 app made with the cli-tool. Most of my routes use Bootswatch (Bootstrap) styling. But one shouldn't at all. This is only a problem because the Bootstrap affects the body and html styles and generally messes with the other styling. The route shouldn't use Bootstrap gets affected even when I #import the Bootstrap in a scoped <style> only to the routes that should use it. This happends if I first visit the Bootsrap routes and then to the isolated one. How should I go about doing this so that one of my routes is completely isolated when it comes to styling? If it's impossible or very impractical, suggest other ways of doing this. If this weren't a single-page-app this would be easy. But I'd prefer it be one.
I succeeded in encapsulating bootstrap import within a class called 'bootstrap-inside' and assigning it to the #app (Index route for example) div that is supposed to be styled with Bootstrap.
.bootstrap-inside {
#import '~bootstrap/scss/bootstrap.scss';
}
From now on, if you want to use bootstrap, you just have to use .bootstrap-inside in your component/view/layout.
I would suggest creating a view layout for your no-bootstrap pages and set your route to extends that layout (i can give you the solution for this too if you want).
I can mention this answer of another thread about limiting the scope of bootstrap styling in case you go through unexpected bootstrap behavior.
The easiest solution I know for this is to manually reset every css property for a given selector.
You could add an id / class to the root element of your page, and explicitly reset all css properties for all its childs. It would override the default bootstrap styles, but not remplacing its classes though.
Here's a class that would reset every css property: reset css for a div #15901030
It's not super convenient but it should work!
I am trying to get vue formulate controls to be syled using Buefy. What is the best way to go about this?
I imagine it's probably with using vue-formulate class keys.
But I am not sure what corresponding Buefy classes to match them to. (Or perhaps there is a different way to go about it?)
Buefy is styled with Bulma — so you have 4 options:
Use class keys to add Bulma styles to your <FormulateInput>s.
Use custom inputs to wrap Buefy components. This will take some work since they don't share common markup. For example, Buefy doesn't really have "error messages", it has "messages" which can be marked with the Bulma class "is-danger".
Ditch Buefy
Ditch Vue Formulate
(Opinion) – If you like Bulma's styles, then I would go with option #1. You can always use Buefy for your site but not for your forms and instead just configure Vue Formulate's class keys with Bulma's classes (Bulma classes are included automatically if youre using Buefy)
Full disclosure: I'm the creator of Vue Formulate.
I did some quick testing using Bulma (not Buefy) and the following class binding seems to work for Bulma style inputs
Vue.use(VueFormulate, {
classes: {
outer: 'field',
wrapper: 'control',
input: 'input'
}
})
I am using ant-design in my CRA app, when I was trying to override the styles for ant component, I gave the element a className in react, but the styles from ant always overrode my styles, only by giving an ID worked.
The CRA app is not ejected but rewired with Less.
Here is how I want to use but doesn't work:
In react component:
<Card className="my-classname"><Card>
In index.css:
.my-classname { ... }
After googling a bit more, I found that className will not override the ant design but combine ant with my css style. So in the case where I tried to override the value that ant design had also specified, my css will not take effect unless I use ID specification.
My question now is should I only use ID so all my css overrides?
The solution which I found after playing abit around the final html code which render in the browser is by overriding the styling of antd class. For ex:- I want to use my custom card styling in project. So, I override the ant-card-head for it. We can override any other class using this. You just have to inspect the rendered react in browser and find correct class associated with it.
.ant-card-head{
border: 0;
text-align: left;
}
I am opening an NgbModal passing a TemplateRef to create the dialog body, and passing in a custom class via the windowClass property of the NgbModalOptions object that I pass to the open() method. I define the class in a referenced styleUrl in the component and am serving the modal via an injectable service in the component. The modal is loading fine, and I can see the class name when I inspect the DOM, but the class appears to have no bearing on the modal. I would like to use it to customize the size of the modal (css is defined to affect the child div where the size is set), but I have also played with properties that I can see in the Styles tab of the Chrome dev tools, but cannot see it affecting anything. When I inspect in Firefox dev tools, I can find the CSS as an inline style sheet and it has a reference to the ngContent identifier assigned by Angular, so I am assuming that is does not affect the entire document, nor those parts added by ng-bootstrap that constitute the modal wrapper. Has anyone been able to make this work successfully? I am at my wit's end. I would even be happy if I could get an ElementRef of the modal-header dive, but since I am using a template (which is not fully loaded in the DOM at init time) I have not been able to. One of my requirements is that we do all DOM manipulation via Angular to maintain platform independence in the project ... so no jQuery. Any thoughts? And thanks in advance!!
I use windowClass and size attributes of NgbModalOptions to customize the modal. Sample code follows:
this.modalService.open(<your_template_ref_var>, {size: 'lg', windowClass: 'modal-adaptive-s1'});
Whereas
.modal-adaptive-s1 .modal-lg {width: 400px !important; max-width: 400px;}
I'm working on styling the breadcrumb module.
Am I able to remove this class: RadSiteMap? I'd like to add my own styles to it.
I'm not sure you can remove that particular class, because I believe it is automatically generated by the control as it renders (you'd have to inherit from it and override this behavior, and even then I'm not sure it's possible).
your best bet is to use CSS to override that class properties. What you can do however, is use an external template (http://www.sitefinity.com/blogs/joshmorales/posts/josh-morales-blog/2011/05/10/mapping_external_templates_for_sitefinity_4_widgets) which will allow you to change the default CSS styles applied to the control (for breadcrum it has a wrapper class of "sfBreadcrumbWrp" and label class of "sfBreadcrumbLabel"
These are defined right in the template and can be changed as needed.
I hope this is helpful!