---
title: ComponentStyle
framework: applenewsformat
role: symbol
role_heading: Object
path: applenewsformat/componentstyle
---

# ComponentStyle

The object for setting style properties for components, including background color and fill, borders, and table styles.

## Declaration

```data
object ComponentStyle
```

## Properties

conditional: An instance or array of component style properties that you apply conditionally, and the conditions that cause Apple News to apply them. backgroundColor: The component’s background color. The value defaults to transparent. Use the none value for conditional design elements. Adding it here has no effect. border: The border for the component. Because the border is drawn inside the component, it affects the size of the content within the component. The bigger the border, the less available space for content. Use the none value for conditional design elements. Adding it here has no effect. fill: A Fill object, such as an ImageFill, that you apply on top of the specified backgroundColor. By default, Apple News doesn’t apply a Fill. Use the none value for conditional design elements. Adding it here has no effect. mask: The object that defines a mask that clips the contents of the component to the specified masking behavior. Use the none value for conditional design elements. Adding it here has no effect. opacity: The opacity of the component, set as a float value between 0 (completely transparent) and 1 (completely opaque). The effects of the component’s opacity are inherited by the subcomponents. See Nesting Components in an Article. tableStyle: The styling for the rows, columns, and cells of the component, if it’s a DataTable or HTMLTable component. Use the none value for conditional design elements. Adding it here has no effect. shadow: The object that defines a component shadow.

## Mentioned in

Enhancing Your Articles with Styles Defining a Component Style Adding a JSON Table Adding an HTML Table Applying a Background to a Component Defining and Using Table Styles Supporting Dark Mode for Your Article

## Discussion

Discussion Use the ComponentStyle object to define the visual appearance of a component, including its background color, fill, opacity, borders, and table style. You can use this object in Component and ArticleDocument.componentStyles. Example {   "components": [     {       "role": "container",       "style": "exampleComponentStyle",       "components": [         {           "role": "title",           "text": "Drought"         }       ]     }   ],   "componentStyles": {     "exampleComponentStyle": {       "backgroundColor": "#FFFFFF",       "opacity": 1,       "border": {         "all": {           "width": 1,           "color": "#333"         },         "left": false,         "right": false       }     }   } }

## Relationships

### Inherited By

- [ConditionalComponentStyle](applenewsformat/conditionalcomponentstyle.md)

## See Also

### Related Documentation

- [Giving the Article a Dark Color Scheme](applenews/giving-the-article-a-dark-color-scheme.md)

### Component Style Basics

- [Defining a Component Style](applenews/defining-a-component-style.md)
- [CornerMask](applenewsformat/cornermask.md)
- [Border](applenewsformat/border.md)
- [StrokeStyle](applenewsformat/strokestyle.md)