Bind Inline Styles

Append a class or multiple classes on an element or component using its style attribute.

This example uses a getter to set inline styles on an element. To provide multiple styles, separate the styles using a colon. Also, use standard kebab-cased CSS property keys like font-size.

When binding inline styles, follow the style global attribute guidelines. Consider using the class attribute with a stylesheet in your component bundle for reusability first. Using inline styles can be helpful when you need to compute properties to generate different styles based on a condition. For example, this function appends a background color that depends on the value this.iconName.

Here's an example that uses an input field to change the size of a chart bar with an inline style. The c-input parent component assigns the percentage property based on user input. It uses the property to pass a value down to the child c-chart component. The child component evaluates the inline style based on the value that's passed down.

When the number in the input field changes, the handlePercentageChange event handler assigns the new value to this.percentage.

The c-chart child component displays the percentage value, which is passed down from c-input.

c-chart evaluates the inline styles based on the percentage property.

See Also

• Style Components with CSS Stylesheets
• Share CSS Style Rules
• Anti-Patterns for Component Styling