1

Is it possible to restyle/modify existing lightning components provider by SalesForce. E.g what I would want, is to take some of the parts/components provided by the SalesForce Financial Services but restyle them, and the embed them on a custom lightning page.

If possible, are there any documentation on how to do it?

A more concrete example:

Relationship map

This relathionship map, is one of the things we want to restyle with our own design.

  • 1, what do you mean by restyle them? 2. are you talking about the base lightning components i.e lightning namespace or components available in lightning app builder – Himanshu Nov 14 '17 at 12:00
  • By restyling, I mean adding my own stylesheet basically. The intention is to embed the component in Community, that looks nothing like the Lightning Design System. So instead of it looking like components made with that design system I want to use mye own stylesheet. I don't really know enough yet to tell you if i'm talking about base components or components in app builder. – espenhogbakk Nov 14 '17 at 12:03
  • Yes we can in the way we want – itzmukeshy7 Nov 14 '17 at 12:22
3

Actually it works but it's considered as anti pattern and is not recommended. Salesforce is especially warning you to do it.

There is a golden rule: don't touch what you don't have created! and to achieve what you want, you will have to break that rule.

This caveat emptor attached, you can hang yourself like this:

  • create a new lightning component (you need only the markup, no helper, no controller)
  • this compo will become something invisible for itself and will be used to hack the other compo
  • inspect the original lightning compo you want to modify (press F12, use browser inspect tools)
  • find out the css classes you want to override and figure out the relevant css selectors
  • tweak the existing css in the browser tool to get a preview and understand what classes do what (this will be different for each original compo)
  • add a <style> tag into the markup of your own compo
  • add selectors you want to hack to that style tag
  • add some extra selectors in the front of each selector to give your selectors more prio than the original like e.g. html body .whatEverOriginalSelector in front
  • your compo is invisible but put it in the Lightning App Builder below the original compo
  • your style with higher prio selectors will override the original component style
  • expect issues if the original author or salesforce are changing the markup: then your hack is likely to break and you have to find new working selectors again

Be always aware this is a hack and it might break any time.

Honestly, I'm using this workaround in some use-cases. Mostly to change Saleforce default styles of out-of-the box things, e.g. some paddings are still way too large for the taste of lots of German clients.

On Record Pages worst thing I've seen happening is that the style falls back to the original. Real mess-ups I have not encountered - however they might be possible, but rare.

Be aware, that LEX is a SPA (single page app) so that an injected style will not be limited to the record page where you use it! It will get carried around and might apply on other flexipages, too. This fact can be irritating and this either can be what you want or not. I always try to be very specific in the selectors to keep a close control on what gets the styles and I only use it, if I can accept the style override on all pages and need not to limit it to the one. However even that can be accomplished using Custom Lightning Page Template. You can put styles or wrapping divs in there, too - so in combination this can be very powerful.

But still - it stays a hack.

| improve this answer | |
1

You can use class attribute which is available for most of the lightning components to style that component in customized manner

A CSS class for the outer element, in addition to the component's base classes.

For example

<lightning:input label="Name" name="myname" />

can be restyled using

<lightning:input label="Name" name="myname" class="inputClass"/>

component.css

.THIS .inputClass input
{
width:100px;
}
| improve this answer | |
  • I think he means to hack a style into an existing compo which is NOT used in the code but in the app builder. He wants to hack into the style of someone else – Uwe Heim Nov 15 '17 at 11:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.