styles props doesn't work

[elyasmotazedy]

when i use styles and pass style it throw me an error

[arnabsen1729]

When I copy and paste this

const style = {
  play: {
    button: {
      width: '28',
      height: '28',
      cursor: 'pointer',
      pointerEvents: 'none',
      outline: 'none',
      backgroundColor: 'yellow',
      border: 'solid 1px rgba(255,255,255,1)',
      borderRadius: 6
    },
  }
};

I get an error

TypeError: Cannot read property 'button' of undefined

[ptrollins]

I was also seeing 'button' of undefined and 'pointerEvents' of undefined. Looking at src/speech it appears play, stop, pause, and resume all need button and button.pointerEvents properties. styles: { play: { button: { pointerEvents: { $set: play } } }, stop: { button: { pointerEvents: { $set: stop } } }, pause: { button: { pointerEvents: { $set: pause } } }, resume: { button: { pointerEvents: { $set: resume } } } } I edited the example Styles code to remove the play object for pause, stop, and resume and added a button property with empty object to pause and don't get the errors.

    container: {},
    text: {},
    buttons: {},
    play: {
      hover: {
        backgroundColor: 'GhostWhite',
      },
      button: {
        cursor: 'pointer',
        pointerEvents: 'none',
        outline: 'none',
        backgroundColor: 'Gainsboro',
        border: 'solid 1px rgba(255,255,255,1)',
        borderRadius: 6,
      },
    },
    pause: {
      hover: {},
      button: {},
    },
    stop: {
      hover: {},
      button: {},
    },
    resume: {
      hover: {},
      button: {},
    },
  };```